JavaScript Loops, Control Flow & Loop Keywords

What Is "Control Flow"?

Control flow is the order in which JavaScript runs your code statements. By default, JavaScript reads code from top to bottom, left to right · like reading a book. But control flow statements let you change that order.

There are four main categories of control flow:

2a. Default (Sequential) Flow

Code runs line by line, in order.

// Example of default sequential flow:
let x = 5;    // Step 1: x gets the value 5
let y = 6;    // Step 2: y gets the value 6
let z = x + y; // Step 3: z = 5 + 6 = 11

Expected output: z is 11

2b. Conditional Flow

Decisions branch the flow using if, if...else, switch, or the ternary operator ? :.

let age = 20;
let text = "Unknown";

if (age >= 18) {
  text = "Adult";   // This branch runs if age is 18 or more
} else {
  text = "Minor";   // This branch runs if age is less than 18
}

console.log(text);

Expected output: Adult

2c. Repetition Flow (Loops)

Loops run a block of code multiple times using for, while, or do...while. This is the main topic of this entire lesson.

2d. Jump Statements

Jump statements abruptly change the flow:

• break · exits a loop or switch
• continue · skips the current loop iteration
• return · exits from a function (we'll cover functions separately)
• throw · jumps to error handling

// Simple jump example with break:
for (let i = 0; i < 10; i++) {
  if (i === 3) { break; }  // JUMP! Stop the loop entirely at i=3
  console.log(i);
}

Expected output:

0
1
2

(The loop stops before printing 3.)

2e. Function Flow

Functions are reusable code blocks that run when called.

function multiply(p1, p2) {
  return p1 * p2;
}

console.log(multiply(4, 5)); // Calls the function

Expected output: 20

JavaScript Is Single-Threaded

JavaScript can only do one thing at a time. Every task must wait for the previous one to finish. This is called being "single-threaded." We will cover asynchronous (non-blocking) programming in a more advanced lesson.

The for loop is the most commonly used loop when you know in advance how many times you want to repeat something.

Syntax (the grammar of a for loop)

for (exp1; exp2; exp3) {
  // code to repeat
}

Three expressions control everything:

First Example · Count 0 to 4

let text = "";

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "\n";
}

console.log(text);

Line-by-line breakdown:

• let i = 0 → (exp1) Create a variable i and set it to 0. This runs once.
• i < 5 → (exp2) "Is i less than 5?" If yes, run the code block. If no, stop.
• i++ → (exp3) After running the code block, add 1 to i. (i++ is shorthand for i = i + 1)
• text += "The number is " + i + "\n" → The actual work done on each repetition. The += means "add this to text."

Expected output:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

The loop stops because when i reaches 5, i < 5 becomes 5 < 5 which is false.

💡 Thinking Question: What if we changed i < 5 to i <= 5? What would be the last number printed? (Answer: 5. The <= means "less than OR equal to", so i=5 would pass the check.)

Second Example · Loop Through an Array of Cars

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let len = cars.length;  // cars.length = 4
let text = "";

for (let i = 0; i < len; i++) {
  text += cars[i] + "\n";
}

console.log(text);

Expected output:

BMW
Volvo
Saab
Ford

Why use cars.length instead of writing 4? Because if you add more cars to the array later, the loop automatically adjusts · you don't have to update the number 4 manually.

What is cars[i]? An array stores items in numbered slots starting at 0. cars[0] is "BMW", cars[1] is "Volvo", etc. When i = 0, cars[i] means cars[0] = "BMW". When i = 1, it means cars[1] = "Volvo". And so on.

What Does "Scope" Mean?

Scope is the area of your program where a variable can be seen and used. Think of it like a security badge at a workplace · some rooms let anyone in, but others only let people with the right badge in.

In JavaScript, var and let behave differently inside loops.

Using var in a Loop

var i = 5;        // i is declared OUTSIDE the loop

for (var i = 0; i < 10; i++) {
  // some code
}

console.log(i);   // What is i here?

Expected output: 10

Why? Because var does NOT respect loop boundaries. The var i inside the loop is the same variable as the var i outside. After the loop ends (when i reaches 10), the outside variable has been changed too. This is usually a bug!

Using let in a Loop (Recommended)

let i = 5;        // i is declared OUTSIDE the loop

for (let i = 0; i < 10; i++) {
  // some code
}

console.log(i);   // What is i here?

Expected output: 5

Why? Because let DOES respect loop boundaries. The let i inside the loop is a brand new, separate variable that only exists inside the loop. The outer i = 5 is untouched.

✅ Best Practice: Always use let (or const) instead of var inside loops. It prevents accidental bugs where the loop variable leaks out.

All three expressions in a for loop are optional. You can leave any of them out · but you must understand why you might and when it's safe.

Omitting exp1 (the start)

You can omit exp1 if you've already set the starting value before the loop:

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;  // Start already set
let text = "";

for (; i < cars.length; i++) {   // exp1 is empty
  text += cars[i] + "\n";
}

console.log(text);

Expected output:

Saab
Ford

(We start at index 2, which is "Saab".)

Omitting exp2 (the condition) · ⚠️ Dangerous!

You can omit exp2, but then you must add a break statement inside the loop or it will run forever and crash your browser.

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

for (; ; ) {        // exp2 is empty — INFINITE loop without break!
  if (i >= cars.length) break;  // Manual stop condition
  text += cars[i] + "\n";
  i++;
}

console.log(text);

Expected output:

BMW
Volvo
Saab
Ford

Omitting exp3 (the increment)

You can omit exp3 if you increment the variable yourself inside the loop body:

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

for (; i < cars.length; ) {  // exp3 is empty
  text += cars[i] + "\n";
  i++;                         // Increment done manually inside the body
}

console.log(text);

Expected output:

BMW
Volvo
Saab
Ford

exp3 Can Do More Than Just Increment

exp3 doesn't have to add 1. It can do anything:

// Count DOWN by 1 (decrement):
for (let i = 5; i > 0; i--) {
  console.log(i);
}

Expected output: 5 4 3 2 1

// Skip by 2 (count: 0, 2, 4, 6, 8):
for (let i = 0; i < 10; i = i + 2) {
  console.log(i);
}

Expected output: 0 2 4 6 8

What Is a while Loop?

The while loop is used when you don't know in advance exactly how many times the loop should run. It keeps going as long as a condition is true.

Real-world analogy: Imagine you're eating dinner and you're hungry. You keep eating while you're hungry. You don't decide in advance to eat exactly 10 bites · you just keep going until the hunger condition is no longer true.

Syntax

while (condition) {
  // code to execute as long as condition is true
}

First Example · Simple Counter

let i = 0;
let text = "";

while (i < 10) {
  text += "The number is " + i + "\n";
  i++;             // ⚠️ VERY IMPORTANT — must increment i
}

console.log(text);

Expected output:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

How it works step by step:

1. i starts at 0.
2. Check: 0 < 10? Yes → run the body → print "The number is 0" → i becomes 1.
3. Check: 1 < 10? Yes → run the body → print "The number is 1" → i becomes 2.
4. ... continues ...
5. Check: 10 < 10? No → STOP. Loop ends.

⚠️ Critical Warning: The Infinite Loop

// ❌ NEVER DO THIS — missing i++ causes an infinite loop!
let i = 0;
while (i < 10) {
  console.log(i);
  // Forgot i++ — i stays 0 forever!
  // This will crash your browser tab!
}

Rule: If you forget to change the variable used in the condition, the condition stays true forever, and the loop never stops. This is called an infinite loop and it freezes your program.

When to Use while vs for

Use for when you know the count in advance (e.g., "loop 10 times" or "loop through all items in an array").

Use while when the stopping condition depends on something that changes unpredictably (e.g., "keep asking for user input while the input is invalid" or "keep processing data while there is more data to read").

What Is do...while?

The do...while loop is a special variant of the while loop. The key difference:

• while checks the condition before running the code.
• do...while checks the condition after running the code.

This means: do...while always runs at least once, even if the condition is false from the start.

Syntax

do {
  // code block
} while (condition);

Notice the semicolon ; after the closing parenthesis · that's required!

Example

let i = 0;
let text = "";

do {
  text += "The number is " + i + "\n";
  i++;
} while (i < 10);

console.log(text);

Expected output:

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

The Unique Behaviour · Runs At Least Once

// What if the condition is false from the start?
let i = 100;
let text = "";

do {
  text += "This still runs once! i = " + i;
} while (i < 10);   // False immediately — i is 100!

console.log(text);

Expected output: This still runs once! i = 100

A regular while loop with i = 100 would not print anything at all. But do...while always runs the body first, then checks.

Real-world analogy: A do...while is like asking someone if they want dessert. You show them the dessert first (you do it), then ask if they want more. They see it at least once before deciding.

A while loop is essentially a for loop with exp1 and exp3 omitted. Compare these two · they do exactly the same thing:

Using for

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

for ( ; cars[i] ; ) {   // exp1 and exp3 are empty
  text += cars[i] + "\n";
  i++;
}

console.log(text);

Using while

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

while (cars[i]) {       // Condition: cars[i] exists (not undefined)
  text += cars[i] + "\n";
  i++;
}

console.log(text);

Both produce the same output:

BMW
Volvo
Saab
Ford

Note: cars[i] as a condition works because when i goes past the last index (e.g., cars[4]), JavaScript returns undefined, which is treated as false. So the loop stops naturally when there are no more items.

What Is break?

The break statement immediately exits the loop it's inside. The remaining iterations are skipped. Program execution continues on the very next line after the loop.

Real-world analogy: You're searching through a drawer for your keys. The moment you find them, you stop searching · you don't keep looking through the rest of the drawer. The break is the moment you say "found it, stop."

Syntax

break;

Example · Breaking Out of a Loop

let text = "";

for (let i = 0; i < 10; i++) {
  if (i === 3) { break; }         // ← When i is 3, EXIT the loop immediately
  text += "The number is " + i + "\n";
}

console.log(text);

Step-by-step:

• i = 0: 0 === 3? No. Print "The number is 0".
• i = 1: 1 === 3? No. Print "The number is 1".
• i = 2: 2 === 3? No. Print "The number is 2".
• i = 3: 3 === 3? YES! → break → Loop exits immediately.

Expected output:

The number is 0
The number is 1
The number is 2

Notice: "The number is 3" is never printed because break fires before text += runs.

The break statement also plays a critical role inside switch statements. Without it, JavaScript keeps executing the code in every case after a match · this is called "fall-through."

Example · Break in a Switch

let day;
switch (new Date().getDay()) {  // getDay() returns 0 (Sunday) through 6 (Saturday)
  case 0:
    day = "Sunday";
    break;         // ← Stop here! Don't fall through to the next case.
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

console.log(day);

Expected output (if today is Friday): Friday

Without break · Dangerous Fall-Through

let score = 2;
let result = "";

switch (score) {
  case 1:
    result += "One ";
  case 2:
    result += "Two ";   // ← Matches here
  case 3:
    result += "Three "; // ← Falls through! Also runs.
  case 4:
    result += "Four ";  // ← Falls through! Also runs.
}

console.log(result);

Expected output: Two Three Four ← Bug! We only wanted "Two".

Always use break in switch cases unless you deliberately want fall-through behavior.

What Is a Label?

A label is a name you give to a statement or a block of code. It lets you reference that code from elsewhere · especially useful in nested loops.

Syntax

labelname: statement;

Or for a block:

labelname: {
  statement1;
  statement2;
}

A label is just an identifier (a name you choose) followed by a colon. By convention, labels are written in lowercase or camelCase.

Think of a label like a bookmark in a book · you can jump back to it whenever you need to.

What Is a Labeled break?

break labelname;

Normally, break only exits the innermost loop it's in. But with a label, you can exit any outer loop from deep inside nested loops.

Example · Break to an Outer Label

let text = "";

loop1: for (let j = 1; j < 5; j++) {       // Outer loop — labeled "loop1"
  loop2: for (let i = 1; i < 5; i++) {     // Inner loop — labeled "loop2"
    if (i === 3) { break loop1; }          // ← Jump OUT of loop1 entirely!
    text += i + " ";
  }
}

console.log(text);

Expected output: 1 2

Why? When j=1 and i=1, we print 1. When i=2, we print 2. When i=3, we break loop1 · we exit the OUTER loop, not just the inner one. So j=2, j=3, j=4 never run at all.

Example · Break to Inner Label Only

let text = "";

loop1: for (let j = 1; j < 5; j++) {       // Outer loop
  loop2: for (let i = 1; i < 5; i++) {     // Inner loop
    if (i === 3) { break loop2; }          // ← Jump OUT of loop2 only
    text += i + " ";
  }
  text += "(end of j=" + j + ") ";
}

console.log(text);

Expected output: 1 2 (end of j=1) 1 2 (end of j=2) 1 2 (end of j=3) 1 2 (end of j=4)

Why? Each time i reaches 3, we only break the inner loop. The outer loop continues with the next value of j.

Labeled Break on a Code Block

break with a label can also jump out of ANY code block (not just loops):

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";

list: {                            // A labeled block — not a loop
  text += cars[0] + "\n";
  text += cars[1] + "\n";
  break list;                      // ← Exit the block here
  text += cars[2] + "\n";          // ← Never runs!
  text += cars[3] + "\n";          // ← Never runs!
}

console.log(text);

Expected output:

BMW
Volvo

⚠️ Note: break and continue are the ONLY JavaScript statements that can "jump out of" a code block { }.

What Is continue?

The continue statement skips the rest of the current iteration and moves immediately to the next one. Unlike break (which exits the loop), continue only skips one turn.

Real-world analogy: You're checking each apple in a basket. When you find a bruised one, you skip it (put it aside) and move to the next apple. You don't stop checking · you continue!

Syntax

continue;

Example · Skip Number 3

let text = "";

for (let i = 1; i < 10; i++) {
  if (i === 3) { continue; }         // ← Skip i=3 and go to i=4
  text += "The number is " + i + "\n";
}

console.log(text);

Expected output:

The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

Notice: "The number is 3" is missing. When i === 3, continue fires and skips the text += line for that iteration only.

💡 Thinking Question: What's the difference between break and continue?

• break → exits the loop entirely. The loop is done.
• continue → skips just this one round. The loop keeps going.

Just like labeled break, labeled continue lets you skip an iteration of a specific outer loop.

continue labelname;

Example · Continue to Outer Label

let text = "";

loop1: for (let j = 1; j < 5; j++) {
  loop2: for (let i = 1; i < 5; i++) {
    if (i === 3) { continue loop1; }   // ← Skip rest of loop1's current iteration
    text += i + " ";
  }
  text += "(never reached) ";          // ← Never prints, because continue jumps past this
}

console.log(text);

Expected output: 1 2 1 2 1 2 1 2

Each time i reaches 3, we jump back to the top of loop1 (incrementing j), skipping i=4 and the code after loop2.

Example · Continue to Inner Label

let text = "";

loop1: for (let j = 1; j < 5; j++) {
  loop2: for (let i = 1; i < 5; i++) {
    if (i === 3) { continue loop2; }   // ← Skip rest of THIS inner iteration only
    text += i + " ";
  }
}

console.log(text);

Expected output: 1 2 4 1 2 4 1 2 4 1 2 4

Each time i reaches 3, we skip it but continue with i=4. So each inner loop prints 1, 2, 4.

Here is a complete picture of all the ways JavaScript can control the order of execution:

Quick Reference Card

for (init; condition; update) { ... }   → Loop a known number of times

while (condition) { ... }               → Loop while condition is true

do { ... } while (condition);           → Loop at least once, then while condition is true

break;                                  → Exit the loop NOW
break labelName;                        → Exit a specific labeled loop

continue;                               → Skip this iteration, go to next
continue labelName;                     → Skip this iteration of a specific labeled loop

JavaScript runs in a single thread. This means it can only do one thing at a time. Every loop iteration, every function call, every calculation must wait in line.

Task 1 → Task 2 → Task 3 → Task 4 → ...
(one at a time, no skipping ahead)

This is important to understand because if you write a very slow loop (like one that runs millions of times), it will freeze your web page until it finishes. This is why developers must be careful about loop performance, and why JavaScript also has asynchronous programming techniques (like Promises and async/await) for handling slow tasks without freezing.

ℹ️ Asynchronous programming is an advanced topic covered separately in the JS Advanced section.

Mistake 1: Forgetting to Increment → Infinite Loop

// ❌ BUG — will freeze your browser!
let i = 0;
while (i < 10) {
  console.log(i);
  // Forgot i++ !
}

// ✅ FIX:
while (i < 10) {
  console.log(i);
  i++;  // ← Always include this!
}

Mistake 2: Off-by-One Error

// ❌ This prints numbers 1 through 5 — but intended 1 through 4:
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// Output: 1 2 3 4 5 (5 included because of <=)

// ✅ To print 1 through 4:
for (let i = 1; i < 5; i++) {
  console.log(i);
}
// Output: 1 2 3 4

Remember: < stops before the limit. <= stops at the limit.

Mistake 3: Using var Instead of let in Loops

// ❌ Bug — the outer variable gets changed unexpectedly
var i = 10;
for (var i = 0; i < 5; i++) { }
console.log(i);  // 5 — not 10!

// ✅ Fix — use let
let i = 10;
for (let i = 0; i < 5; i++) { }
console.log(i);  // 10 — unchanged!

Mistake 4: Missing break in a switch

// ❌ Missing break causes fall-through
switch (day) {
  case 1:
    result = "Monday";   // Intended to only set Monday
  case 2:
    result = "Tuesday";  // Overwrites Monday! Bug!
}

// ✅ Fix:
switch (day) {
  case 1:
    result = "Monday";
    break;
  case 2:
    result = "Tuesday";
    break;
}

Mistake 5: Confusing break and continue

// break → STOPS the loop entirely
for (let i = 0; i < 5; i++) {
  if (i === 2) break;
  console.log(i);
}
// Output: 0 1

// continue → SKIPS one turn, loop keeps going
for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}
// Output: 0 1 3 4

🌡️ Exercise 1: Weather Temperature Printer (For Loop)

Objective: Use a for loop to print daily temperature readings.

Scenario: You work at a weather station. You have 7 days of temperatures and need to display each one with its day number.

Warm-up Mini-Example:

// Mini-example: Loop through a small number array
let nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
  console.log("Value at index " + i + " is: " + nums[i]);
}
// Output:
// Value at index 0 is: 10
// Value at index 1 is: 20
// Value at index 2 is: 30

Your Task:

// Given data:
const temperatures = [22, 19, 25, 30, 28, 17, 21];
const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

// Write a for loop that prints:
// "Monday: 22°C"
// "Tuesday: 19°C"
// ... and so on for all 7 days

Step-by-step instructions:

1. Declare a for loop starting at i = 0.
2. Set the condition to i < temperatures.length (or i < 7).
3. Increment i by 1 each round.
4. Inside the loop, use console.log(days[i] + ": " + temperatures[i] + "°C").

Hints:

• Both arrays are aligned: days[0] goes with temperatures[0], etc.
• temperatures.length is 7.

Expected output:

Monday: 22°C
Tuesday: 19°C
Wednesday: 25°C
Thursday: 30°C
Friday: 28°C
Saturday: 17°C
Sunday: 21°C

Self-check questions:

1. What happens if you accidentally write i <= temperatures.length?
2. Can you modify the loop to only print temperatures above 25°C?
3. What does i++ mean exactly?

What-if challenge: Add an if statement inside the loop to print "HOT DAY!" next to any temperature that is 28 or above.

Professional connection: Meteorologists and data scientists write loops exactly like this to process and display weather data from sensor arrays.

🏦 Exercise 2: Bank Interest Calculator (While Loop)

Objective: Use a while loop to calculate how many years it takes for a savings account to double.

Scenario: A bank customer deposits $1,000 at 5% annual interest. Write code to find how many years it takes to reach $2,000.

Warm-up Mini-Example:

// Mini-example: Counting up until a condition is met
let total = 100;
let years = 0;

while (total < 150) {
  total = total + 10;  // Add 10 each year
  years++;
}

console.log("Years to reach 150: " + years);
// Output: Years to reach 150: 5

Your Task:

let balance = 1000;
let years = 0;
let interestRate = 0.05;  // 5%

// Write a while loop that:
// 1. Keeps adding 5% interest each year
// 2. Counts each year
// 3. Stops when balance reaches or exceeds 2000
// 4. Prints the number of years

Hints:

• Each year, balance increases by: balance = balance + (balance interestRate) or balance = 1.05.
• Don't forget to count years++ inside the loop.
• The condition should be balance < 2000.

Expected output: It takes 15 years to double the investment.

Self-check questions:

1. Why is while more natural here than for?
2. What would happen if the interest rate were 0%?
3. What is the balance after exactly 10 years?

🎓 Exercise 3: Skip Failing Grades (continue)

Objective: Use continue to skip and count students who failed.

Scenario: You're a teacher processing grade data. You want to print only the students who passed (grade ≥ 50) and count how many failed.

Warm-up Mini-Example:

// Mini-example: Skip even numbers
for (let i = 1; i <= 8; i++) {
  if (i % 2 === 0) continue;  // Skip even numbers
  console.log(i);
}
// Output: 1 3 5 7

Your Task:

const students = [
  { name: "Alice", grade: 85 },
  { name: "Bob", grade: 42 },
  { name: "Carol", grade: 91 },
  { name: "Dave", grade: 38 },
  { name: "Eve", grade: 67 },
  { name: "Frank", grade: 55 },
];

// Write a for loop that:
// 1. Uses continue to skip students with grade < 50
// 2. Prints the name and grade of passing students
// 3. Counts how many failed

Expected output:

Alice passed with 85
Carol passed with 91
Eve passed with 67
Frank passed with 55
2 student(s) failed.

Hints:

• Use if (students[i].grade < 50) { failCount++; continue; } to skip failures.
• Notice: students[i].name accesses the name property of each student object.
• Declare let failCount = 0 before the loop.

🔍 Exercise 4: Search and Stop (break)

Objective: Use break to search for a specific product in a list and stop as soon as it's found.

Scenario: You're a warehouse worker searching for "Laptop" in a list of inventory items. Once you find it, report its position and stop searching.

Warm-up Mini-Example:

// Mini-example: Find number 7 in an array
let numbers = [3, 9, 1, 7, 4, 6];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 7) {
    console.log("Found 7 at index " + i);
    break;
  }
}
// Output: Found 7 at index 3

Your Task:

const inventory = ["Monitor", "Keyboard", "Mouse", "Laptop", "Headphones", "Webcam"];
const target = "Laptop";

// Write a for loop that:
// 1. Searches for target
// 2. Prints "Found [target] at position [i]" when found
// 3. Uses break to stop searching immediately
// 4. Prints "Not found" if the loop finishes without finding it

Expected output: Found Laptop at position 3

Hint: Use a boolean variable let found = false; and set it to true when you find the item. Check it after the loop to print "Not found" if still false.