🔁 JavaScript Control Flow – Guide to Conditional Statements, Loops & Iterators (2025)

---

🧲 Introduction – Why Learn JavaScript Control Flow?

Control flow in JavaScript determines the order in which code is executed. Using conditional statements, loops, and iterators, developers can control how and when certain blocks of code run. This forms the logical backbone of any program.

🎯 In this guide, you’ll learn:

• How to use if...else and switch statements
• Various looping constructs like for, while, for...in, and for...of
• How to break or continue loops
• How to create your own iterators

---

📘 Topics Covered

🔹 Topic	📄 Description
if…else	Conditional branching
switch	Multi-way decision structure
Loops	for, while, do…while, for…in, for…of
break	Exiting a loop or switch early
continue	Skipping the current loop iteration
Loop Control	Combining break, continue, and labels
User-Defined Iterators	Creating custom iteration logic

---

✅ JavaScript – if…else Statement

The if...else construct executes a block of code based on a condition.

let score = 75;

if (score >= 90) {
  console.log("A");
} else if (score >= 75) {
  console.log("B");
} else {
  console.log("C");
}

📌 Use if...else for binary or multi-way decision logic.

---

🔄 JavaScript – switch Statement

The switch statement is ideal when you have multiple fixed values to compare.

let day = 2;

switch(day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  default:
    console.log("Another day");
}

🧠 Always include break to prevent fall-through.

---

🔁 JavaScript – Loops

Loops help repeat a block of code while a condition is true.

---

🔁 for Loop

for (let i = 0; i < 3; i++) {
  console.log(i); // 0 1 2
}

Used when number of iterations is known.

---

🔄 while Loop

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

Runs as long as the condition remains true.

---

🔁 do...while Loop

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 3);

✅ Executes at least once, even if the condition is false.

---

🗂️ for...in Loop

Used to iterate over object properties:

let user = { name: "John", age: 30 };
for (let key in user) {
  console.log(key, user[key]);
}

---

📦 for...of Loop

Used to iterate over iterable values like arrays, strings:

let colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color);
}

---

🚫 JavaScript – break Statement

Stops loop or switch execution:

for (let i = 0; i < 5; i++) {
  if (i === 3) break;
  console.log(i); // 0 1 2
}

---

⏭️ JavaScript – continue Statement

Skips current iteration and moves to the next one:

for (let i = 0; i < 5; i++) {
  if (i === 3) continue;
  console.log(i); // 0 1 2 4
}

---

🧭 JavaScript – Loop Control with Labels

JavaScript allows labeled loops for nested loop control:

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) break outer;
    console.log(i, j);
  }
}

✅ Useful in deep nested loops.

---

🔄 JavaScript – User-Defined Iterators

Create your own custom iterable objects using the iterator protocol.

let counter = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    let last = this.to;
    return {
      next() {
        if (current <= last) {
          return { done: false, value: current++ };
        } else {
          return { done: true };
        }
      }
    };
  }
};

for (let num of counter) {
  console.log(num); // 1 2 3
}

🔧 You define how the object should be iterated manually.

---

📌 Summary – Recap & Next Steps

Control flow is what turns static code into logical and interactive programs. It lets you decide when, how, and how often code runs.

🔍 Key Takeaways:

• Use if...else and switch for decision-making
• Choose between for, while, for...of, for...in based on your data
• Use break and continue for fine control
• Create custom iterators for advanced iteration logic

⚙️ Real-World Relevance:
From validating input to iterating API results or rendering UI, control flow logic powers almost every interaction in JavaScript.

---

❓ FAQs

Q1: What’s the difference between for...in and for...of?

✅ for...in iterates over object keys, while for...of iterates over iterable values like arrays or strings.

Q2: When should I use switch over if...else?

✅ Use switch when comparing the same variable against many constants. It’s cleaner and more readable.

Q3: Can I nest loops and use break to exit both?

✅ Yes, by using labeled loops (break labelName).

Q4: What is an iterator in JavaScript?

✅ An object that follows the iterator protocol and can be used with for...of.

Q5: Does do...while always execute once?

✅ Yes, even if the condition is false from the start.

---

Share Now :