JSJavaScript · Lesson 3 of 14

Control Flow & Loops

JavaScript has all the standard control structures, plus a few extras. It's also the only major language where the for loop has four different forms.

JavaScript
// if / else if / else
const score = 75;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("Try harder");
}

// Ternary operator — one-line if/else
const result = score >= 60 ? "Pass" : "Fail";
console.log(result);   // Pass

// Nullish coalescing — use right side if left is null/undefined
const username = null ?? "Guest";
console.log(username);   // Guest

// Optional chaining — safely access nested properties
const user = { profile: { name: "Alice" } };
console.log(user?.profile?.name);    // Alice
console.log(user?.address?.city);    // undefined (no error)
JavaScript
// Classic for loop
for (let i = 0; i < 5; i++) {
  console.log(i);   // 0, 1, 2, 3, 4
}

// for...of — iterate over array values (use this for arrays)
const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
  console.log(fruit);
}

// for...in — iterate over object keys (use this for objects)
const person = { name: "Alice", age: 30, city: "Paris" };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

// while loop
let count = 0;
while (count < 3) {
  console.log(count);
  count++;
}

// Array methods replace many loops in modern JS
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);      // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15
◆ Note
Prefer for...of over the classic for loop for arrays. Prefer .map()/.filter()/.reduce() for transformations. Reserve while for when you genuinely don't know the iteration count upfront.