Chapter 6: JavaScript Fundamentals

JavaScript is the programming language of the web. It allows you to add interactivity, logic, and dynamic behavior to your websites. While HTML provides structure and CSS provides styling, JavaScript brings your pages to life.

Why Learn JavaScript?

• It's the only programming language that runs natively in all web browsers
• Powers both frontend (user interface) and backend (Node.js) development
• Essential for creating interactive web applications
• Huge ecosystem of libraries and frameworks (React, Vue, Angular)

Your First JavaScript Code

The simplest way to output something in JavaScript is using console.log():

// This is a comment - it's ignored by JavaScript
console.log("Hello, World!");

// You can log numbers too
console.log(42);

// And do math
console.log(5 + 3);  // Outputs: 8

Variables are containers that store data values. Think of them as labeled boxes where you can put information and retrieve it later.

Declaring Variables

JavaScript has three ways to declare variables:

// let - for values that will change
let age = 25;
age = 26;  // Can be reassigned

// const - for values that won't change
const name = "Alice";
// name = "Bob";  // Error! Cannot reassign const

// var - older way (avoid in modern code)
var score = 100;

Data Types

JavaScript has several primitive data types:

Template Literals (Backticks)

Template literals let you embed variables inside strings using ${}:

const name = "Joe";
const age = 30;

// Old way (string concatenation)
const greeting1 = "Hello " + name + ", you are " + age + " years old.";

// New way (template literals - use backticks!)
const greeting2 = `Hello ${name}, you are ${age} years old.`;

console.log(greeting2);  // "Hello Joe, you are 30 years old."

Functions are reusable blocks of code that perform a specific task. They help organize code and avoid repetition.

Function Declaration

// Defining a function
function greet() {
  console.log("Hello!");
}

// Calling (running) the function
greet();  // Outputs: Hello!

Parameters and Arguments

Functions can accept input values called parameters:

// 'name' is a parameter (placeholder)
function sayHello(name) {
  console.log(`Hello ${name}!`);
}

// "Alice" is an argument (actual value)
sayHello("Alice");  // Outputs: Hello Alice!
sayHello("Bob");    // Outputs: Hello Bob!

The return Statement

Functions can send back a value using return:

function addNumbers(a, b) {
  return a + b;  // Sends the result back
}

const sum = addNumbers(5, 3);
console.log(sum);  // Outputs: 8

// You can also use the return value directly
console.log(addNumbers(10, 20));  // Outputs: 30

Export Default (For Exercises)

The exercises use export default to make functions available for testing:

// This is the pattern used in the exercises
export default function helloWorld() {
  return "Hello world!";
}

// With parameters
export default function sayHello(name) {
  return `Hello ${name}, how are you?`;
}

Operators allow you to perform operations on values.

Arithmetic Operators

console.log(10 + 5);   // Addition: 15
console.log(10 - 5);   // Subtraction: 5
console.log(10 * 5);   // Multiplication: 50
console.log(10 / 5);   // Division: 2
console.log(10 % 3);   // Modulo (remainder): 1
console.log(2 ** 3);   // Exponent: 8

Comparison Operators

These compare values and return true or false:

console.log(5 === 5);   // Equal: true
console.log(5 !== 3);   // Not equal: true
console.log(5 > 3);     // Greater than: true
console.log(5 < 3);     // Less than: false
console.log(5 >= 5);    // Greater or equal: true
console.log(5 <= 4);    // Less or equal: false

Logical Operators

Combine multiple conditions:

const age = 25;

// AND (&&) - both must be true
console.log(age >= 20 && age <= 80);  // true (age is between 20-80)

// OR (||) - at least one must be true
console.log(age < 18 || age > 65);  // false (neither is true)

// NOT (!) - reverses the boolean
console.log(!true);   // false
console.log(!false);  // true

Conditionals let your code make decisions based on conditions.

if Statement

const num = 5;

if (num > 0) {
  console.log("Positive!");
}

if...else Statement

function isPositive(num) {
  if (num > 0) {
    return true;
  } else {
    return false;
  }
}

else if Chains (Exercise 7)

For multiple conditions, use else if:

function calculateGrade(score) {
  if (score >= 90 && score <= 100) {
    return "A";
  } else if (score >= 80) {
    return "B";
  } else if (score >= 70) {
    return "C";
  } else if (score >= 60) {
    return "D";
  } else {
    return "F";
  }
}

switch Statement (Exercise 8)

For checking a value against multiple specific cases:

function getDayType(day) {
  switch (day) {
    case "Saturday":
    case "Sunday":
      return "Weekend";
    case "Monday":
    case "Tuesday":
    case "Wednesday":
    case "Thursday":
    case "Friday":
      return "Weekday";
    default:
      return "Invalid day";
  }
}

Loops repeat code multiple times. JavaScript has several loop types.

for Loop (Exercise 11)

Best when you know how many times to repeat:

// for (initialization; condition; update)
for (let i = 1; i <= 5; i++) {
  console.log(i);  // 1, 2, 3, 4, 5
}

// Create array with values 2-10
function integers() {
  const result = [];
  for (let i = 2; i <= 10; i++) {
    result.push(i);
  }
  return result;
}

while Loop (Exercise 12)

Best when you don't know exactly how many iterations:

// Countdown from n to 1
function countDown(n) {
  const result = [];
  while (n >= 1) {
    result.push(n);
    n--;  // Decrease n by 1
  }
  return result;
}

break and continue

// break - exit the loop completely
for (let i = 1; i <= 10; i++) {
  if (i === 5) break;  // Stop at 5
  console.log(i);  // 1, 2, 3, 4
}

// continue - skip to next iteration
for (let i = 1; i <= 5; i++) {
  if (i === 3) continue;  // Skip 3
  console.log(i);  // 1, 2, 4, 5
}

Arrays store multiple values in a single variable.

Creating and Accessing Arrays

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]);     // "apple" (index starts at 0)
console.log(fruits[1]);     // "banana"
console.log(fruits.length); // 3

Array Methods

const nums = [1, 2, 3];

nums.push(4);      // Add to end: [1, 2, 3, 4]
nums.pop();        // Remove from end: [1, 2, 3]
nums.includes(2);  // Check if exists: true

Iterating Arrays (Exercises 14-16)

// Sum all numbers in an array
function sumArray(nums) {
  let sum = 0;
  for (let i = 0; i < nums.length; i++) {
    sum += nums[i];
  }
  return sum;
}

// Count even numbers
function countEven(nums) {
  let count = 0;
  for (let i = 0; i < nums.length; i++) {
    if (nums[i] % 2 === 0) count++;
  }
  return count;
}

// Average of numbers
function average(nums) {
  return sumArray(nums) / nums.length;
}

Creating New Arrays (Exercises 17-20)

// Reverse an array
function reverseArray(arr) {
  const reversed = [];
  for (let i = arr.length - 1; i >= 0; i--) {
    reversed.push(arr[i]);
  }
  return reversed;
}

// Remove duplicates
function removeDuplicates(arr) {
  const unique = [];
  for (let i = 0; i < arr.length; i++) {
    if (!unique.includes(arr[i])) {
      unique.push(arr[i]);
    }
  }
  return unique;
}

Objects are one of the most important concepts in JavaScript. They let you group related data together.

What is an Object?

An object is a collection of key-value pairs (called properties). Think of it like a labeled container:

// Think of this like a filing cabinet with labeled drawers
const person = {
  name: "Alice",      // key: "name", value: "Alice"
  age: 25,            // key: "age", value: 25
  isStudent: true     // key: "isStudent", value: true
};

// You can store ANY type of value in an object:
// - Strings, numbers, booleans
// - Arrays, other objects
// - Even functions!

Accessing Properties: Two Ways

There are two ways to get values from an object:

const person = { name: "Alice", age: 25 };

// 1. Dot notation (most common, cleaner)
console.log(person.name);      // "Alice"
console.log(person.age);       // 25

// 2. Bracket notation (needed for dynamic keys)
console.log(person["name"]);   // "Alice"

// Bracket notation shines when the key is in a variable:
const keyName = "age";
console.log(person[keyName]);  // 25 - this works!
console.log(person.keyName);   // undefined - this looks for literal "keyName"

Modifying Objects

const person = { name: "Alice", age: 25 };

// Change existing property
person.age = 26;

// Add new property
person.email = "alice@email.com";

// Delete a property
delete person.isStudent;

console.log(person);
// { name: "Alice", age: 26, email: "alice@email.com" }

Useful Object Methods (Exercises 21-25)

const person = { name: "Alice", age: 25, city: "Athens" };

// Get all keys as an array
Object.keys(person);    // ["name", "age", "city"]

// Get all values as an array
Object.values(person);  // ["Alice", 25, "Athens"]

// Count properties
Object.keys(person).length;  // 3

// Check if property exists
person.hasOwnProperty("name");  // true
person.hasOwnProperty("email"); // false

Looping Through Objects: for...in

const scores = { math: 90, english: 85, science: 92 };

// for...in loops through all KEYS
for (let subject in scores) {
  console.log(subject + ": " + scores[subject]);
}
// Output:
// math: 90
// english: 85
// science: 92

Merging Objects (Spread Operator)

const defaults = { theme: "dark", language: "en" };
const userPrefs = { language: "el" };

// Spread operator (...) copies properties
const merged = { ...defaults, ...userPrefs };

console.log(merged);
// { theme: "dark", language: "el" }
// Note: userPrefs.language overrides defaults.language!

Strings can be manipulated like arrays - each character has an index.

String Basics

const text = "Hello";

console.log(text.length);    // 5
console.log(text[0]);        // "H"
console.log(text.toLowerCase()); // "hello"
console.log(text.toUpperCase()); // "HELLO"

String Exercises (26-30)

// Reverse a string
function reverseString(str) {
  let result = "";
  for (let i = str.length - 1; i >= 0; i--) {
    result += str[i];
  }
  return result;
}

// Count vowels
function countVowels(str) {
  const vowels = "aeiouAEIOU";
  let count = 0;
  for (let char of str) {
    if (vowels.includes(char)) count++;
  }
  return count;
}

// Truncate string
function truncate(str, maxLength) {
  if (str.length <= maxLength) return str;
  return str.slice(0, maxLength) + "...";
}

// Count words
function countWords(str) {
  return str.trim().split(" ").filter(w => w).length;
}

Here's which lesson helps with each exercise: