MSDN Documentation

JavaScript Control Flow

Control flow statements are the building blocks that allow you to dictate the order in which your JavaScript code is executed. They enable your programs to make decisions, repeat actions, and handle different scenarios dynamically.

Conditional Statements

Conditional statements allow your program to execute different blocks of code based on whether certain conditions are true or false.

The if Statement

The most basic conditional statement, the if statement, executes a block of code if a specified condition is true.

if (condition) {
  // code to be executed if condition is true
}
        

The if...else Statement

The if...else statement executes one block of code if a condition is true, and another block if it's false.

if (condition) {
  // code to be executed if condition is true
} else {
  // code to be executed if condition is false
}
        

The if...else if...else Statement

This allows you to check multiple conditions in sequence.

if (condition1) {
  // code to be executed if condition1 is true
} else if (condition2) {
  // code to be executed if condition2 is true
} else {
  // code to be executed if neither condition1 nor condition2 is true
}
        

let age = 18;

if (age < 13) {
  console.log("You are a child.");
} else if (age >= 13 && age < 18) {
  console.log("You are a teenager.");
} else {
  console.log("You are an adult.");
}
            

The switch Statement

The switch statement is used when you have multiple possible values for a single expression. It's often more readable than a long series of if...else if statements.

switch (expression) {
  case value1:
    // code to execute if expression matches value1
    break; // Important to exit the switch statement
  case value2:
    // code to execute if expression matches value2
    break;
  default:
    // code to execute if no match is found
}
        

let day = "Monday";
let message = "";

switch (day) {
  case "Monday":
    message = "Start of the week!";
    break;
  case "Friday":
    message = "Almost the weekend!";
    break;
  default:
    message = "Just another day.";
}

console.log(message);
            

Loops

Loops allow you to execute a block of code repeatedly, either a specific number of times or until a certain condition is met.

The for Loop

The for loop is ideal when you know in advance how many times you want to iterate.

for (initialization; condition; final-expression) {
  // code to be executed repeatedly
}
        

Explanation:

• initialization: Executes once before the loop starts (e.g., setting a counter to 0).
• condition: Evaluated before each iteration. If true, the loop continues; if false, the loop terminates.
• final-expression: Executes after each iteration (e.g., incrementing the counter).

for (let i = 1; i <= 5; i++) {
  console.log("Count: " + i);
}
            

Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
            

The while Loop

The while loop executes a block of code as long as a specified condition is true. The condition is checked at the beginning of each iteration.

while (condition) {
  // code to be executed repeatedly
  // Make sure to include logic that eventually makes the condition false
}
        

let countdown = 3;
while (countdown > 0) {
  console.log(countdown + "...");
  countdown--;
}
console.log("Blast off!");
            

3...
2...
1...
Blast off!
            

The do...while Loop

The do...while loop is similar to the while loop, but it guarantees that the code block will be executed at least once, as the condition is checked at the end of the iteration.

do {
  // code to be executed repeatedly
  // Make sure to include logic that eventually makes the condition false
} while (condition);
        

let counter = 0;
do {
  console.log("This will run at least once. Counter: " + counter);
  counter++;
} while (counter < 0); // Condition is false initially
            

This will run at least once. Counter: 0
            

The for...in Loop

The for...in loop iterates over the enumerable properties of an object.

for (variable in object) {
  // code to be executed for each property
}
        

The variable will be assigned the name of each property in the object during each iteration.

The for...of Loop

The for...of loop iterates over the values of an iterable object (like Arrays, Strings, Maps, Sets, etc.).

for (variable of iterable) {
  // code to be executed for each value
}
        

const fruits = ["Apple", "Banana", "Cherry"];
for (const fruit of fruits) {
  console.log(fruit);
}
            

Apple
Banana
Cherry
            

Loop Control Statements

These statements allow you to alter the normal flow of loops.

The break Statement

The break statement terminates the current loop or switch statement immediately.

const numbers = [1, 5, 10, 15, 20];
let found = false;

for (const num of numbers) {
  if (num === 10) {
    console.log("Found the number 10!");
    break; // Exit the loop once 10 is found
  }
}
            

The continue Statement

The continue statement skips the rest of the current iteration of a loop and proceeds to the next iteration.

for (let i = 1; i <= 5; i++) {
  if (i % 2 === 0) {
    continue; // Skip even numbers
  }
  console.log(i);
}
            

1
3
5
            

Mastering control flow is fundamental to writing robust and dynamic JavaScript applications. Experiment with these statements to build a solid understanding!