Why While loop in Javascript? - Purpose & Use Cases

The Big Idea

What if you could tell the computer to do boring tasks for you, over and over, without lifting a finger?

The Scenario

Imagine you want to count from 1 to 10 and write each number down one by one by hand.

Doing this for just 10 numbers is okay, but what if you need to count to 100 or 1000?

The Problem

Writing each number manually takes a lot of time and is boring.

It's easy to make mistakes, like skipping a number or writing the wrong one.

Doing repetitive tasks by hand is slow and frustrating.

The Solution

A while loop lets the computer repeat a task automatically as long as a condition is true.

This means you write the instructions once, and the computer does the counting for you without errors.

Before vs After

✗ Before

console.log(1);
console.log(2);
console.log(3);
// ... keep writing each number

✓ After

let i = 1;
while (i <= 10) {
  console.log(i);
  i++;
}

What It Enables

With while loops, you can easily repeat tasks many times without extra work or mistakes.

Real Life Example

Imagine a game where you want to keep asking the player if they want to play again until they say no.

A while loop can keep asking the question automatically until the player decides to stop.

Key Takeaways

Manual repetition is slow and error-prone.

While loops automate repeated tasks based on a condition.

This saves time and reduces mistakes in your code.

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