Control Flow - Conditional Statements and Loops

Control Flow - Conditional Statements and Loops

Control flow in JavaScript determines the sequence in which code is executed. This tutorial will teach you how to control the flow of your program using conditional statements and loops.

What is Control Flow?

Control flow is the order in which individual statements, instructions, or function calls are executed or evaluated in a program. JavaScript, like most programming languages, executes code line by line, but you can alter this order using control flow techniques.

Conditional Statements

Conditional statements allow you to make decisions in your code based on conditions (true or false). JavaScript provides several types of conditional statements:

1. if Statement

Executes a block of code if the condition is true.

Syntax:

if (condition) {
  // Code to execute if condition is true
}

Example:

let age = 18;
if (age >= 18) {
  console.log("You are eligible to vote.");
}

2. if...else Statement

Executes one block of code if the condition is true, and another if it is false.

Syntax:

if (condition) {
  // Code if condition is true
} else {
  // Code if condition is false
}

Example:

let age = 16;
if (age >= 18) {
  console.log("You are eligible to vote.");
} else {
  console.log("You are not eligible to vote.");
}

3. if...else if...else Statement

Handles multiple conditions.

Syntax:

if (condition1) {
  // Code if condition1 is true
} else if (condition2) {
  // Code if condition2 is true
} else {
  // Code if none of the conditions are true
}

Example:

let score = 85;
if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 75) {
  console.log("Grade: B");
} else if (score >= 50) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}

4. Ternary Operator (Conditional Operator)

A compact way of writing an if...else statement.

Syntax:

condition ? value_if_true : value_if_false;

Example:

let isMember = true;
let discount = isMember ? "10% off" : "No discount";
console.log(discount); // Output: 10% off

5. Switch Statement

Efficient for checking a variable against multiple values.

Syntax:

switch (expression) {
  case value1:
    // Code to execute if expression === value1
    break;
  case value2:
    // Code to execute if expression === value2
    break;
  default:
    // Code to execute if none of the cases match
}

Example:

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of the week.");
    break;
  case "Friday":
    console.log("End of the work week.");
    break;
  default:
    console.log("It's a regular day.");
}

Loops in JavaScript

Loops allow you to execute a block of code multiple times without writing the same code repeatedly.

1. for Loop

Runs a block of code for a specified number of times.

Syntax:

for (initialization; condition; update) {
  // Code to execute
}

Example:

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

2. while Loop

Repeats a block of code as long as the condition is true.

Syntax:

while (condition) {
  // Code to execute
}

Example:

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

3. do...while Loop

Similar to the while loop but guarantees at least one execution because the condition is checked after the code runs.

Syntax:

do {
  // Code to execute
} while (condition);

Example:

let number = 1;
do {
  console.log("Number: " + number);
  number++;
} while (number <= 5);

4. for...of Loop

Used to iterate over arrays, strings, or any iterable object.

Syntax:

for (variable of iterable) {
  // Code to execute
}

Example:

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

5. for...in Loop

Used to iterate over the properties of an object.

Syntax:

for (key in object) {
  // Code to execute
}

Example:

let person = {
  name: "Alice",
  age: 30,
  country: "USA"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

Breaking and Continuing in Loops

• break Statement: Immediately exits the loop.
• continue Statement: Skips the current iteration and continues with the next one.

Example:

for (let i = 1; i <= 5; i++) {
  if (i === 3) break;   // Stops at 3
  console.log("Value: " + i);
}

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue; // Skips 3
  console.log("Value: " + i);
}

Common Mistakes and Troubleshooting

• ❌ Missing break in switch cases can cause "fall-through" (all cases after the matched one will execute).
• ❌ Infinite loops can crash your code if the condition never becomes false.
• ❌ Using let instead of var in for loops can prevent proper variable scope.
• ❌ Confusing == (loose equality) with === (strict equality).

Best Practices

• Use switch for multiple conditions of the same type.
• Prefer for...of over traditional for for array iteration.
• Avoid using for...in on arrays (use it only for objects).
• Use const for variables that will not change within the loop.

Quick Recap

• Control flow allows you to decide which code executes and how many times.
• Conditional statements (if, else, switch) allow for decision-making.
• Loops (for, while, do...while, for...of, for...in) allow for code repetition.
• Always be careful with infinite loops.