For loop in Javascript - Step-by-Step Execution

Concept Flow - For loop

Initialize i=0

↓

Check: i < 5?

No→EXIT

Yes↓

Execute body

↓

Update: i = i+1

↩Back to Check

The for loop starts by setting a variable, checks a condition, runs the code inside if true, then updates the variable and repeats until the condition is false.

Execution Sample

Javascript

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

This code prints numbers from 0 to 4, one per line.

Execution Table

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

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

Variable Tracker

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

Key Moments - 3 Insights

Why does the loop stop when i equals 5?

Because the condition i < 5 becomes false at i = 5, so the loop exits as shown in execution_table row 6.

When is the value of i updated during the loop?

i is updated after executing the loop body, before the next condition check, as seen between each iteration in variable_tracker.

Does the loop print the number 5?

No, because the loop stops before printing when i is 5, confirmed by the exit in execution_table row 6.

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 4

💡 Hint

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

At which iteration does the loop condition become false?

A 5

B 6

C 4

D 1

💡 Hint

Look at the 'Condition (i < 5)' column in execution_table where it changes to false.

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

A 4 times

B 5 times

C 6 times

D 7 times

💡 Hint

Think about the condition i <= 5 allowing i to be 5 inside the loop, check variable_tracker for i values.

Concept Snapshot

for (let i = 0; i < limit; i++) {
  // code to repeat
}
- Initialize i once at start
- Check condition before each loop
- Run code if true
- Update i after each loop
- Stop when condition is false

Full Transcript

A for loop in JavaScript starts by setting a variable i to 0. It then checks if i is less than 5. If yes, it runs the code inside the loop, here printing i. After that, it increases i by 1. This repeats until i is 5, when the condition i < 5 becomes false and the loop stops. The loop prints numbers 0 to 4. The variable i changes from 0 up to 5, but the loop stops before printing 5. This process is shown step-by-step in the execution table and variable tracker.

Practice

1.

What does a for loop do in JavaScript?

easy

A. Changes the value of a variable once

B. Stops the program immediately

C. Repeats a block of code a set number of times

D. Creates a new variable

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: Compare options with the for loop behavior

   Only Repeats a block of code a set number of times correctly describes repeating code multiple times.

3. Final Answer:

   Repeats a block of code a set number of times -> Option C

4. Quick Check:

   For loop = repeat code [OK]

Hint: For loops repeat code multiple times [OK]

Common Mistakes:

• Thinking for loop stops program
• Confusing variable creation with looping
• Assuming for loop runs only once

2.

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

for (___; ___; ___) {
  // code
}

easy

A. for (i = 0; i < 5; i++)

B. for i = 0; i < 5; i++

C. for (i < 5; i = 0; i++)

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

Solution

1. Step 1: Recall the for loop syntax

   The correct syntax is: for (start; condition; change) { ... }

2. Step 2: Check each option against syntax

   for (i = 0; i < 5; i++) matches the correct syntax with initialization, condition, and increment.

3. Final Answer:

   for (i = 0; i < 5; i++) -> Option A

4. Quick Check:

   Syntax = for (init; cond; change) [OK]

Hint: For loop needs three parts inside parentheses [OK]

Common Mistakes:

• Missing parentheses around for loop parts
• Wrong order of parts inside for loop
• Using semicolons incorrectly

3.

What will be the output of this code?

let result = '';
for (let i = 1; i <= 3; i++) {
  result += i + ' ';
}
console.log(result.trim());

medium

A. "3 2 1"

B. "1 2 3"

C. "123"

D. "1 2 3 4"

Solution

1. Step 1: Understand the loop iterations

   The loop runs with i = 1, 2, 3 because i <= 3.

2. Step 2: Track the string concatenation

   Each iteration adds the number and a space to result: "1 ", then "1 2 ", then "1 2 3 ". trim() removes the last space.

3. Final Answer:

   "1 2 3" -> Option B

4. Quick Check:

   Loop 1 to 3 adds numbers with spaces [OK]

Hint: Check loop range and string building carefully [OK]

Common Mistakes:

• Ignoring the spaces added
• Forgetting trim() removes trailing space
• Assuming loop includes 4

4.

Find the error in this for loop code:

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

medium

A. Missing curly braces around loop body

B. Incorrect variable declaration 'let i = 0'

C. Wrong loop condition 'i < 5'

D. Missing increment operator 'i++' in the loop

Solution

1. Step 1: Check the loop increment part

   The loop has 'i' instead of 'i++' which means i never changes.

2. Step 2: Understand the effect of missing increment

   Without increment, the loop runs forever or does not progress, causing an error or infinite loop.

3. Final Answer:

   Missing increment operator 'i++' in the loop -> Option D

4. Quick Check:

   Increment needed to change loop variable [OK]

Hint: Check all three parts of for loop syntax carefully [OK]

Common Mistakes:

• Forgetting to increment loop variable
• Using wrong condition syntax
• Missing braces but allowed in single line

5.

You want to create a for loop that prints only even numbers from 2 to 10 inclusive. Which code snippet does this correctly?

hard

A. for (let i = 2; i <= 10; i += 2) { console.log(i); }

B. for (let i = 0; i <= 10; i++) { if (i % 2 === 0) console.log(i); }

C. for (let i = 2; i < 10; i++) { if (i % 2 === 0) console.log(i); }

D. for (let i = 2; i <= 10; i++) { if (i % 2 === 1) console.log(i); }

Solution

1. Step 1: Identify the range and condition for even numbers

   We want numbers 2, 4, 6, 8, 10 inclusive.

2. Step 2: Check each option for correctness

   for (let i = 2; i <= 10; i += 2) { console.log(i); } increments by 2 starting at 2, printing only even numbers up to 10. for (let i = 0; i <= 10; i++) { if (i % 2 === 0) console.log(i); } starts from 0 and prints 0 which is outside the 2-10 range. for (let i = 2; i < 10; i++) { if (i % 2 === 0) console.log(i); } misses 10 because it uses i < 10. for (let i = 2; i <= 10; i++) { if (i % 2 === 1) console.log(i); } prints odd numbers, which is wrong.

3. Final Answer:

   for (let i = 2; i <= 10; i += 2) { console.log(i); } -> Option A

4. Quick Check:

   Increment by 2 prints evens directly [OK]

Hint: Use i += 2 to skip odd numbers [OK]

Common Mistakes:

• Using wrong loop condition (i < 10)
• Printing odd numbers by mistake
• Not incrementing properly to skip odds