While loop in Javascript - Step-by-Step Execution

Concept Flow - While loop

Initialize variable

↓

Check condition?

No→EXIT

Yes↓

Execute loop body

↓

Update variable

↩Back to Check

The while loop starts by checking a condition. If true, it runs the loop body, updates variables, then checks again. It stops when the condition is false.

Execution Sample

Javascript

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

This code prints numbers 0, 1, 2 by repeating the loop while count is less than 3.

Execution Table

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

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

Variable Tracker

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

Key Moments - 2 Insights

Why does the loop stop when count is 3 even though the code inside the loop increases count?

The condition is checked before the loop body runs each time. When count is 3, the condition count < 3 is false, so the loop does not run again (see execution_table row 4).

What happens if we forget to increase count inside the loop?

The condition will always be true, causing an infinite loop because count never changes (no progress in variable_tracker).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count during the 2nd iteration?

A 1

B 2

C 0

D 3

💡 Hint

Check the 'count' column in execution_table row 2

At which iteration does the condition become false and the loop stops?

A 3

B 4

C 2

D 1

💡 Hint

Look at execution_table row 4 where condition is false

If we change the condition to count < 5, how many times will the loop run?

A 3 times

B 4 times

C 5 times

D 6 times

💡 Hint

The loop runs while count is less than the condition number, see variable_tracker for count changes

Concept Snapshot

while (condition) {
  // code runs while condition is true
}

- Condition checked before each loop
- Loop stops when condition is false
- Update variables inside loop to avoid infinite loops

Full Transcript

A while loop in JavaScript repeats code as long as a condition is true. It starts by checking the condition. If true, it runs the loop body, then updates variables. This repeats until the condition becomes false. For example, starting with count = 0, the loop prints count and increases it by 1 each time. When count reaches 3, the condition count < 3 is false, so the loop stops. Remember to update variables inside the loop to avoid infinite loops.

Practice

1. What does a while loop do in JavaScript?

easy

A. Repeats code while a condition is true

B. Runs code only once

C. Runs code a fixed number of times

D. Stops the program immediately

Solution

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

   A while loop runs repeatedly as long as its condition stays true.

2. Step 2: Compare options with the definition

   Only Repeats code while a condition is true correctly describes this behavior.

3. Final Answer:

   Repeats code while a condition is true -> Option A

4. Quick Check:

   while loop = repeats while true [OK]

Hint: Remember: while loops run only if condition is true [OK]

Common Mistakes:

• Thinking while loops run a fixed number of times
• Confusing while with if statement
• Assuming while loops run at least once

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

easy

A. while condition { /* code */ }

B. while (condition) { /* code */ }

C. while: (condition) { /* code */ }

D. while (condition); { /* code */ }

Solution

1. Step 1: Recall JavaScript while loop syntax

   The correct syntax uses parentheses around the condition and curly braces for the code block: while (condition) { ... }.

2. Step 2: Check each option

   while (condition) { /* code */ } matches the correct syntax exactly.

3. Final Answer:

   while (condition) { /* code */ } -> Option B

4. Quick Check:

   Correct syntax = while (condition) { } [OK]

Hint: Look for parentheses around condition and braces for code [OK]

Common Mistakes:

• Omitting parentheses around the condition
• Using a semicolon after while condition
• Adding a colon after while keyword

3. What will be the output of this code?

let count = 1;
while (count <= 3) {
  console.log(count);
  count++;
}

medium

A. 0 1 2 3

B. 1 2 3 4

C. 3 2 1

D. 1 2 3

Solution

1. Step 1: Analyze the loop condition and increments

   The loop starts with count = 1 and runs while count is less than or equal to 3. Each time, it prints count and then adds 1.

2. Step 2: Trace the output values

   It prints 1, then 2, then 3. When count becomes 4, the condition fails and loop stops.

3. Final Answer:

   1 2 3 -> Option D

4. Quick Check:

   Prints 1 to 3 inclusive [OK]

Hint: Count starts at 1 and stops after 3 [OK]

Common Mistakes:

• Including 4 in output
• Starting count at 0 instead of 1
• Printing in reverse order

4. Find the error in this code snippet:

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

medium

A. Missing semicolon after console.log

B. Variable i is not declared

C. Missing parentheses around the condition

D. Increment operator is incorrect

Solution

1. Step 1: Check while loop syntax

   JavaScript requires parentheses around the condition in a while loop.

2. Step 2: Identify the error in the code

   The code has while i < 5 { but it should be while (i < 5) {.

3. Final Answer:

   Missing parentheses around the condition -> Option C

4. Quick Check:

   while needs (condition) [OK]

Hint: Always put condition inside parentheses in while [OK]

Common Mistakes:

• Forgetting parentheses around condition
• Adding semicolon after while condition
• Misusing increment operator

5. You want to print all even numbers from 2 to 10 using a while loop. Which code correctly does this?

hard

A. let num = 2;
while (num <= 10) {
console.log(num);
num += 2;
}

B. let num = 1;
while (num < 10) {
if (num % 2 === 0) console.log(num);
num++;
}

C. let num = 2;
while (num < 10) {
console.log(num);
num += 2;
}

D. let num = 0;
while (num <= 10) {
console.log(num);
num += 2;
}

Solution

1. Step 1: Understand the goal and loop conditions

   We want to print even numbers from 2 to 10 inclusive. So the loop must start at 2 and run while number is less than or equal to 10.

2. Step 2: Check each option for correctness

   let num = 2; while (num <= 10) { console.log(num); num += 2; } starts at 2, prints number, then adds 2, stopping at 10. This prints 2,4,6,8,10 correctly. let num = 1; while (num < 10) { if (num % 2 === 0) console.log(num); num++; } starts at 1, uses modulo check, but since num < 10 stops after 9, printing 2,4,6,8 missing 10. let num = 2; while (num < 10) { console.log(num); num += 2; } stops before 10, missing 10. let num = 0; while (num <= 10) { console.log(num); num += 2; } starts at 0, which is not in the required range.

3. Final Answer:

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

4. Quick Check:

   Start 2, add 2, stop at 10 [OK]

Hint: Start at 2, add 2 each loop, stop at 10 [OK]

Common Mistakes:

• Starting at 0 or 1 instead of 2
• Stopping before 10
• Not incrementing by 2