Chapter 4: JavaScript Fundamentals

Bring your web pages to life — learn variables, logic, loops, functions, and data structures.

Variables

Data Types

Operators

Conditionals

Loops

Functions

Arrays

Objects

Quiz

Variables

Variables are like labeled jars in a kitchen. The label is the variable name, and the contents are the value. You can change what's inside the jar anytime, and you use the label to find what you need.

JavaScript has three ways to declare variables:

let — can be reassigned (use this most of the time)
const — cannot be reassigned (use for values that won't change)
var — the old way (avoid in modern JS)

JavaScript — Variables & console.log

// 'let' — value CAN be changed later
let myName = "Alex";
console.log("Name:", myName);

myName = "Sam";  // Reassigning is OK with let
console.log("New name:", myName);

// 'const' — value CANNOT be changed
const birthYear = 2000;
console.log("Birth year:", birthYear);

// Uncomment the line below to see the error:
// birthYear = 1999;  // ERROR! Can't reassign const

// Variable naming rules:
let camelCase = "use camelCase for variable names";
let _canStartWithUnderscore = true;
let $orDollarSign = true;
// let 1cantStartWithNumber = false;  // ERROR!

console.log(camelCase);
console.log("Can start with _:", _canStartWithUnderscore);

// TRY: Create your own variable and log it!

Always use const by default. Only switch to let when you know the value will change. Never use var in modern JavaScript — it has weird scoping rules that cause bugs.

Data Types

JavaScript has several built-in data types. Every value you work with is one of these types:

JavaScript — Data Types

// STRING — text (in quotes)
const greeting = "Hello, World!";
console.log("String:", greeting, "| Type:", typeof greeting);

// NUMBER — integers and decimals
const age = 25;
const price = 9.99;
console.log("Number:", age, "| Type:", typeof age);

// BOOLEAN — true or false
const isLoggedIn = true;
const isAdmin = false;
console.log("Boolean:", isLoggedIn, "| Type:", typeof isLoggedIn);

// UNDEFINED — declared but no value assigned
let future;
console.log("Undefined:", future, "| Type:", typeof future);

// NULL — intentionally empty
const emptyValue = null;
console.log("Null:", emptyValue, "| Type:", typeof emptyValue);

// TIP: typeof tells you what type a value is
console.log("\ntypeof 42 =", typeof 42);
console.log("typeof 'hello' =", typeof "hello");
console.log("typeof true =", typeof true);

Type	Example	Description
`String`	`"hello"`	Text data
`Number`	`42, 3.14`	Integers and decimals
`Boolean`	`true, false`	Yes/no, on/off
`undefined`	`undefined`	No value assigned yet
`null`	`null`	Intentionally empty
`Array`	`[1, 2, 3]`	Ordered list of values
`Object`	`{name: "Alex"}`	Key-value pairs

Operators

JavaScript — Operators

// ARITHMETIC OPERATORS
console.log("=== Arithmetic ===");
console.log("5 + 3 =", 5 + 3);    // Addition
console.log("10 - 4 =", 10 - 4);  // Subtraction
console.log("6 * 7 =", 6 * 7);    // Multiplication
console.log("15 / 4 =", 15 / 4);  // Division
console.log("15 % 4 =", 15 % 4);  // Remainder (modulo)
console.log("2 ** 3 =", 2 ** 3);  // Exponent (2^3 = 8)

// COMPARISON OPERATORS
console.log("\n=== Comparison ===");
console.log("5 === 5:", 5 === 5);    // Strict equal (type + value)
console.log("5 === '5':", 5 === '5'); // false! Different types
console.log("5 == '5':", 5 == '5');   // true (loose equal, avoid this!)
console.log("10 > 5:", 10 > 5);
console.log("3 <= 3:", 3 <= 3);
console.log("5 !== 3:", 5 !== 3);    // Not equal

// STRING CONCATENATION
console.log("\n=== Strings ===");
const firstName = "John";
const lastName = "Doe";
console.log("Concat:", firstName + " " + lastName);

// TEMPLATE LITERALS (modern way — use backticks!)
const age = 25;
console.log(`${firstName} is ${age} years old.`);
console.log(`Next year: ${age + 1}`);

Always use === (strict equality), never ==. The loose equality == does automatic type conversion that leads to weird bugs: "0" == false is true!

Conditionals (if/else)

Conditionals are like a traffic light. If the light is green, you go. If it's yellow, you slow down. If it's red, you stop. Your code makes decisions the same way — checking conditions and running different code for each case.

JavaScript — if/else Conditionals

const temperature = 28;

// IF / ELSE IF / ELSE
if (temperature > 35) {
    console.log("It's scorching hot! Stay indoors.");
} else if (temperature > 25) {
    console.log("It's warm and pleasant.");
} else if (temperature > 15) {
    console.log("It's cool. Grab a jacket.");
} else {
    console.log("It's cold! Bundle up.");
}

// LOGICAL OPERATORS: && (and), || (or), ! (not)
const age = 20;
const hasID = true;

if (age >= 18 && hasID) {
    console.log("Access granted!");
} else {
    console.log("Access denied.");
}

// TERNARY OPERATOR (shorthand if/else)
const score = 85;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
console.log(`Score: ${score} → Grade: ${grade}`);

// TRY: Change the temperature and age values to see different outputs!
console.log("\n--- Change the values above and click Run! ---");

Loops

A loop is like a washing machine cycle. It repeats the same action (wash, rinse, spin) until a condition is met (the timer runs out). In code, loops repeat a block of code until a condition becomes false.

JavaScript — Loops

// FOR LOOP — when you know how many times to repeat
console.log("=== for loop ===");
for (let i = 1; i <= 5; i++) {
    console.log(`Iteration ${i}`);
}

// WHILE LOOP — when you repeat until a condition is false
console.log("\n=== while loop ===");
let count = 0;
while (count < 3) {
    console.log(`Count is: ${count}`);
    count++;  // Don't forget this or it loops forever!
}

// FOR...OF — loop over arrays (most common in modern JS)
console.log("\n=== for...of loop ===");
const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
    console.log(`I like ${fruit}`);
}

// LOOP WITH BREAK — stop early
console.log("\n=== break ===");
for (let i = 1; i <= 10; i++) {
    if (i === 4) break;  // Stop when i is 4
    console.log(`Number: ${i}`);
}

// TRY: Change the loop limits, or add "continue" to skip a number

In modern JavaScript, prefer for...of for looping over arrays and for...in for looping over object keys. The classic for (let i = 0; ...) loop is still useful when you need the index number.

Functions

A function is like a recipe. You write it once, then use it whenever you want. You can pass in different ingredients (arguments) and get a different dish (return value) each time.

JavaScript — Functions

// FUNCTION DECLARATION
function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("Alice"));
console.log(greet("Bob"));

// FUNCTION WITH MULTIPLE PARAMETERS
function add(a, b) {
    return a + b;
}
console.log("3 + 5 =", add(3, 5));

// DEFAULT PARAMETERS
function welcome(name = "stranger") {
    console.log(`Welcome, ${name}!`);
}
welcome("Charlie");  // "Welcome, Charlie!"
welcome();           // "Welcome, stranger!"

// ARROW FUNCTIONS (modern, concise syntax)
const multiply = (a, b) => a * b;
console.log("4 * 7 =", multiply(4, 7));

// Arrow function with body
const describe = (name, age) => {
    const status = age >= 18 ? "adult" : "minor";
    return `${name} is ${age} years old (${status})`;
};
console.log(describe("Dave", 25));
console.log(describe("Eve", 15));

// TRY: Write your own function that calculates the area of a rectangle!

Arrays

An array is like a numbered shopping list. Each item has a position (index) starting from 0. You can add items, remove items, search through the list, and transform every item at once.

JavaScript — Arrays & Array Methods

// Creating arrays
const colors = ["red", "green", "blue"];
console.log("Colors:", colors);
console.log("First:", colors[0]);    // Index starts at 0!
console.log("Length:", colors.length);

// PUSH — add to end
colors.push("yellow");
console.log("After push:", colors);

// POP — remove from end
const removed = colors.pop();
console.log("Popped:", removed, "→", colors);

// MAP — transform every item (creates NEW array)
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log("\nOriginal:", numbers);
console.log("Doubled:", doubled);

// FILTER — keep items that pass a test (creates NEW array)
const evenNumbers = numbers.filter(n => n % 2 === 0);
console.log("Even only:", evenNumbers);

// FIND — get the first item that matches
const found = numbers.find(n => n > 3);
console.log("First > 3:", found);

// INCLUDES — check if array contains a value
console.log("\nHas 3?", numbers.includes(3));
console.log("Has 99?", numbers.includes(99));

// REDUCE — combine all items into one value
const sum = numbers.reduce((total, n) => total + n, 0);
console.log("Sum of all:", sum);

// TRY: Use .filter() to get all numbers greater than 2

🎯 Challenge!

Create an array of 5 names
Use .map() to make them all uppercase (hint: name.toUpperCase())
Use .filter() to keep only names longer than 4 characters

Objects

An object is like a contact card. Instead of numbered positions (like arrays), each piece of data has a name (key). A person's contact card might have keys like "name", "phone", "email" — each with its own value.

JavaScript — Objects

// Creating an object
const person = {
    name: "Alice",
    age: 28,
    city: "New York",
    hobbies: ["reading", "coding", "hiking"],
    isStudent: false
};

// Accessing values
console.log("Name:", person.name);           // Dot notation
console.log("City:", person["city"]);         // Bracket notation
console.log("First hobby:", person.hobbies[0]);

// Modifying values
person.age = 29;
person.email = "alice@example.com";  // Add new property
console.log("\nUpdated:", person);

// Object methods (functions inside objects)
const calculator = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
};
console.log("\n5 + 3 =", calculator.add(5, 3));
console.log("10 - 4 =", calculator.subtract(10, 4));

// DESTRUCTURING — extract values into variables
const { name, age, city } = person;
console.log(`\n${name} is ${age}, lives in ${city}`);

// Object.keys / Object.values
console.log("\nKeys:", Object.keys(person));
console.log("Values:", Object.values(person));

// TRY: Add a "job" property and a greet() method to the person object!

Objects are everywhere in JavaScript! DOM elements, API responses, configuration, even arrays — they're all objects under the hood. Mastering objects is the key to mastering JavaScript.

📝 Chapter 4 Quiz

1. Which keyword declares a variable that CANNOT be reassigned?

let

const

var

static

2. What is the difference between === and ==?

They are the same

=== checks value AND type, == only checks value

=== is slower than ==

3. What does [1,2,3].map(n => n * 2) return?

[2, 4, 6]

[1, 2, 3, 1, 2, 3]

[1, 2, 3]

4. Which is correct arrow function syntax?

function => (a, b) { return a + b }

const add = (a, b) -> a + b

const add = lambda(a, b): a + b

const add = (a, b) => a + b

5. What does [10, 20, 30][1] return?

undefined

← Chapter 3: Flexbox & Grid Chapter 5: Async JavaScript →