Loop execution flow in Javascript - Step-by-Step Execution

Concept Flow - Loop execution flow

Initialize counter i=0

↓

Check condition i < 3?

No→EXIT LOOP

Yes↓

Execute loop body

↓

Update counter i = i + 1

↩Back to condition check

The loop starts by setting a counter, checks if the condition is true, runs the loop body if yes, then updates the counter and repeats until the condition is false.

Execution Sample

Javascript

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

This code prints numbers 0, 1, and 2 by looping while i is less than 3.

Execution Table

Iteration	i value	Condition (i < 3)	Action	Output
1	0	true	Print 0, i++	0
2	1	true	Print 1, i++	1
3	2	true	Print 2, i++	2
4	3	false	Exit loop

💡 i reaches 3, condition 3 < 3 is false, loop stops

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
i	0	1	2	3	3

Key Moments - 3 Insights

Why does the loop stop when i equals 3?

Because the condition i < 3 becomes false at iteration 4 (see execution_table row 4), so the loop exits.

When is the value of i updated during the loop?

i is updated after the loop body runs in each iteration (see execution_table Action column), before the next condition check.

Why does the loop print 0 first instead of 1?

Because i starts at 0 (initialization), and the condition is checked before the loop body, so the first printed value is 0 (see execution_table row 1).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of i during the 3rd iteration?

A 2

B 3

C 1

D 0

💡 Hint

Check the 'i value' column in the execution_table at iteration 3.

At which iteration does the loop condition become false?

A Iteration 3

B Iteration 2

C Iteration 4

D Iteration 1

💡 Hint

Look at the 'Condition (i < 3)' column in the execution_table for when it becomes false.

If we change the loop to i < 4, how many times will the loop run?

A 3 times

B 4 times

C 5 times

D 2 times

💡 Hint

Think about how the condition affects the number of iterations, referencing the variable_tracker for i values.

Concept Snapshot

for (let i = 0; i < limit; i++) {
  // loop body
}

1. Initialize counter i
2. Check condition before each iteration
3. Run loop body if true
4. Update counter after body
5. Repeat until condition false

Full Transcript

This visual shows how a for loop runs in JavaScript. It starts by setting a counter i to 0. Then it checks if i is less than 3. If yes, it runs the loop body, printing i. After that, it increases i by 1. This repeats until i reaches 3, when the condition becomes false and the loop stops. The execution table tracks each step, showing i's value, the condition check, the action taken, and the output printed. The variable tracker shows how i changes after each iteration. Common confusions include why the loop stops at 3, when i updates, and why it prints 0 first. The quiz questions help check understanding of these steps.

Practice

1. What does a for loop do in JavaScript?

easy

A. Stops the program immediately

B. Runs code only once

C. Creates a new variable

D. Repeats code a set number of times

Solution

1. Step 1: Understand the purpose of a for loop

   A for loop is designed to repeat code multiple times based on a condition.

2. Step 2: Identify the correct description

   Among the options, only repeating code a set number of times matches the for loop behavior.

3. Final Answer:

   Repeats code a set number of times -> Option D

4. Quick Check:

   for loop = repeat fixed times [OK]

Hint: For loops repeat code a fixed number of times [OK]

Common Mistakes:

• Thinking for loops run only once
• Confusing for loops with if statements
• Believing for loops stop the program

2. Which of the following is the correct syntax for a for loop in JavaScript?

easy

A. for i = 0 to 5 { }

B. for (let i = 0; i < 5; i++) { }

C. loop (i = 0; i < 5; i++) { }

D. for (i < 5; i = 0; i++) { }

Solution

1. Step 1: Recall JavaScript for loop syntax

   The correct syntax uses for (initialization; condition; increment) { }.

2. Step 2: Compare options to syntax

   Only for (let i = 0; i < 5; i++) { } matches the correct syntax with let i = 0; i < 5; i++.

3. Final Answer:

   for (let i = 0; i < 5; i++) { } -> Option B

4. Quick Check:

   for loop syntax = initialization; condition; increment [OK]

Hint: Remember for loop uses three parts inside parentheses [OK]

Common Mistakes:

• Using incorrect keywords like 'loop'
• Swapping initialization and condition
• Missing semicolons inside for parentheses

3. What will be the output of this code?

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

medium

A. 6

B. 3

C. 0

D. Error

Solution

1. Step 1: Trace the loop iterations

   The loop runs with i = 1, 2, 3. Each time, sum adds i: 0+1=1, 1+2=3, 3+3=6.

2. Step 2: Determine final sum value

   After the loop, sum is 6, which is printed by console.log.

3. Final Answer:

   6 -> Option A

4. Quick Check:

   Sum 1+2+3 = 6 [OK]

Hint: Add numbers step-by-step inside the loop [OK]

Common Mistakes:

• Stopping loop early
• Adding wrong values
• Confusing sum initialization

4. Find the error in this loop:

for (let i = 0; i < 5; i--) {
  console.log(i);
}

medium

A. Console.log is incorrect

B. Syntax error in for loop

C. The loop will run infinitely because i decreases

D. Variable i is not declared

Solution

1. Step 1: Analyze the loop increment/decrement

   The loop uses i--, so i decreases each time starting from 0.

2. Step 2: Check loop condition

   The condition is i < 5, which is true for all i less than 5, including negative numbers. Since i decreases, it never reaches 5 or more, so loop never ends.

3. Final Answer:

   The loop will run infinitely because i decreases -> Option C

4. Quick Check:

   Decrement with < condition causes infinite loop [OK]

Hint: Check if increment matches loop condition direction [OK]

Common Mistakes:

• Confusing i-- with i++
• Ignoring loop condition logic
• Assuming loop stops automatically

5. How many times will this loop run?

let count = 0;
let i = 10;
while (i > 0) {
  i -= 3;
  count++;
}
console.log(count);

hard

A. 4

B. 3

C. 5

D. 6

Solution

1. Step 1: Trace the while loop iterations

   Start i=10, count=0. Each loop: i decreases by 3, count increases by 1.
   Iterations:
   1) i=7, count=1
   2) i=4, count=2
   3) i=1, count=3
   4) i=-2, count=4 (loop stops after this because i > 0 is false)

2. Step 2: Count total iterations

   The loop runs 4 times before i becomes -2 and condition fails.

3. Final Answer:

   4 -> Option A

4. Quick Check:

   Subtract 3 until i ≤ 0 counts 4 times [OK]

Hint: Count how many times i decreases by 3 until ≤ 0 [OK]

Common Mistakes:

• Counting one less or more iteration
• Not updating count correctly
• Misunderstanding while loop condition