Control Flow - If Statements and Loops

What is Control Flow?

Control flow is the order in which JavaScript executes statements. By default, code runs top to bottom. Control flow structures let you branch (run different code depending on conditions) and repeat (run the same code multiple times).

If / Else If / Else

The if statement runs a block of code only when a condition is truthy:

const score = 78;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 70) {
  console.log("Grade: B");
} else if (score >= 50) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}
// Output: "Grade: B"

You can chain as many else if blocks as needed. Only the first matching branch executes.

Truthy and Falsy Values

JavaScript automatically converts conditions to boolean. The following values are falsy (they behave like false):

false, 0, "", null, undefined, NaN

Everything else is truthy. This lets you write concise conditions:

const username = "";

if (username) {
  console.log("Welcome, " + username);
} else {
  console.log("Please enter your name"); // This runs because "" is falsy
}

Switch Statements

A switch statement is useful when you have many branches based on a single value:

const day = "Monday";

switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("Weekday");
    break;
  case "Saturday":
  case "Sunday":
    console.log("Weekend");
    break;
  default:
    console.log("Unknown day");
}

Always include a break statement at the end of each case to stop it from falling through to the next case. The default case runs when no case matches.

For Loops

A for loop runs a block of code a specific number of times:

// Syntax: for (initialisation; condition; update)
for (let i = 0; i < 5; i++) {
  console.log("Iteration:", i);
}
// Outputs: 0, 1, 2, 3, 4

A practical example — looping through an array:

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

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

While Loops

A while loop runs as long as a condition is truthy:

let attempts = 0;

while (attempts < 3) {
  console.log("Attempt:", attempts + 1);
  attempts++;
}
// Outputs: Attempt: 1, Attempt: 2, Attempt: 3

Be careful with while loops — if the condition never becomes false, you get an infinite loop that crashes the browser.

for...of (Recommended for Arrays)

The for...of loop iterates directly over the values of an array or other iterable, without needing an index:

const courses = ["HTML", "CSS", "JavaScript", "React"];

for (const course of courses) {
  console.log("Learning:", course);
}
// Learning: HTML
// Learning: CSS
// Learning: JavaScript
// Learning: React

Use for...of whenever you need to loop through an array and do not need the index.

break and continue

break exits the loop entirely:

for (let i = 0; i < 10; i++) {
  if (i === 5) break; // Stop the loop when i reaches 5
  console.log(i);
}
// Outputs: 0, 1, 2, 3, 4

continue skips the current iteration and moves to the next:

for (let i = 0; i < 5; i++) {
  if (i === 2) continue; // Skip when i is 2
  console.log(i);
}
// Outputs: 0, 1, 3, 4

Key Takeaways

• if/else if/else branches execution based on conditions evaluated as truthy or falsy
• Switch statements cleanly handle multiple branches based on a single value
• for loops are ideal when you know how many iterations you need
• while loops run as long as a condition is truthy — always ensure the condition eventually becomes false
• for...of is the cleanest way to loop over array values without needing an index
• break exits a loop; continue skips to the next iteration

Practice Exercise

1. Write a function getFeelingDescription(temp) that returns "Hot" for temps above 30, "Warm" for 20-30, "Cool" for 10-19, and "Cold" below 10
2. Use a for loop to print the numbers 1 through 10, but use continue to skip multiples of 3
3. Create an array of student names and use for...of to log a personalised message for each
4. Write a while loop that counts down from 5 to 1 then logs "Blast off!"