JavaScript while Loops: A Beginner Guide with Practical Examples

A while loop in JavaScript is a control flow statement that allows code to be executed repeatedly based on a given condition. The loop continues to execute as long as the condition evaluates to true. Once the condition becomes false, the loop stops.

Syntax

while (condition) {
  // Code to be executed
}

 

1.   condition: This is an expression that is evaluated before each iteration of the loop. If the condition is true, the loop continues. If it's false, the loop terminates.

2.   body: The block of code that will be executed for each iteration as long as the condition is true.

 

Example 1: Print numbers from 1 to 5 using while loop

 

printNumbers.js

let i = 1;

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

 

Output

1
2
3
4
5

 

·      We initialize the variable i with the value 1.

·      The loop checks if i is less than or equal to 5.

·      If the condition is true, it prints the current value of i and increments i by 1.

·      This process repeats until i becomes 6, at which point the condition i <= 5 becomes false, and the loop terminates.

 

Example 2: Iterate over array elements.

Let's use a while loop to iterate through an array and print each element.

 

printArray.js

 

let fruits = ["apple", "banana", "orange", "mango"];
let index = 0;

while (index < fruits.length) {
  console.log(fruits[index]);
  index++;
}

Output

apple
banana
orange
mango

·      The array fruits contains four elements.

·      We initialize index to 0.

·      The loop checks if index is less than the length of the array (fruits.length).

·      If the condition is true, it prints the element at the current index and increments the index.

·      The loop continues until index equals the length of the array, at which point the condition becomes false, and the loop stops.

 

 

Example 3: Breaking Out of a while Loop

Sometimes, you might want to exit a loop before the condition becomes false. You can do this using the break statement.

 

breakLoop.js

let i = 1;

while (i <= 10) {
  console.log(i);
  if (i === 5) {
    break; // Exit the loop when i is 5
  }
  i++;
}

Output

1
2
3
4
5

 

·      The loop is set to run from 1 to 10.

·      However, we include a condition that checks if i is equal to 5.

·      When i reaches 5, the break statement is executed, causing the loop to terminate immediately.

 

Example 4: while Loop with continue Statement

The continue statement can be used to skip the current iteration and move to the next one.

 

continueStmt.js

let i = 0;

while (i < 10) {
  i++;
  if (i % 2 === 0) {
    continue; // Skip even numbers
  }
  console.log(i);
}

Output

1
3
5
7
9

·      The loop runs from 0 to 9.

·      We increment i at the beginning of each iteration.

·      If i is an even number (i % 2 === 0), the continue statement is executed, which skips the rest of the loop body for that iteration.

·      Only odd numbers are printed.

 

Example 5: Iterate over records.

 

iterateOverRecords.js

let records = [
  { id: 1, name: "Krishna" },
  { id: 2, name: "Ram" },
  { id: 3, name: "Raghav" }
];

let index = 0;

while (index < records.length) {
  let record = records[index];
  console.log(`ID: ${record.id}, Name: ${record.name}`);
  index++;
}

Output

ID: 1, Name: Krishna
ID: 2, Name: Ram
ID: 3, Name: Raghav

The while loop is a powerful tool in JavaScript that allows for repeated execution of code blocks as long as a specified condition remains true. It's essential to ensure that the loop's condition eventually becomes false to avoid infinite loops. The break and continue statements provide additional control over the loop's execution, allowing you to exit or skip iterations as needed.

 

Previous                                                    Next                                                    Home