While Loop

JavaScript While Loop

The while loop is another control structure in JavaScript that allows you to execute a block of code as long as a specified condition is true. It is useful when you do not know in advance how many times you need to repeat a block of code.

Syntax

while (condition) {
  // Code to be executed as long as the condition is true
}

• condition: This is the condition that is checked before each iteration. If the condition evaluates to true, the loop continues. If it evaluates to false, the loop stops.

Example

Let's consider a simple example of a while loop that prints the numbers from 1 to 5.

let i = 1;

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

In this example:

• The variable i is initialized to 1.

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

• As long as the condition is true, the code inside the loop (console.log(i); i++;) is executed.

• The value of i is incremented by 1 after each iteration.

• When i becomes 6, the condition i <= 5 evaluates to false, and the loop stops.

Using the While Loop with Arrays

The while loop can also be used to iterate over the elements of an array. Here's an example:

let fruits = ['apple', 'banana', 'cherry'];
let index = 0;

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

In this example:

• The variable index is initialized to 0.

• The while loop checks if index is less than the length of the fruits array.

• As long as the condition is true, the code inside the loop (console.log(fruits[index]); index++;) is executed.

• The value of index is incremented by 1 after each iteration.

• When index becomes equal to the length of the fruits array, the condition index < fruits.length evaluates to false, and the loop stops.

The do...while Loop

The do...while loop is a variant of the while loop that executes the code block at least once before checking the condition. The condition is evaluated after the code block has been executed.

Syntax

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

Example

Let's consider a simple example of a do...while loop that prints the numbers from 1 to 5.

let i = 1;

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

In this example:

• The variable i is initialized to 1.

• The code block inside the do statement (console.log(i); i++;) is executed.

• After the code block is executed, the condition i <= 5 is checked.

• As long as the condition is true, the loop continues.

• When i becomes 6, the condition i <= 5 evaluates to false, and the loop stops.

Using While Loop with codeswithpankaj.com

To illustrate the use of the while loop with codeswithpankaj.com, let's consider an example where we generate a list of tutorial topics.

let topics = ['HTML', 'CSS', 'JavaScript', 'React', 'Node.js'];
let index = 0;

while (index < topics.length) {
  console.log('Learn ' + topics[index] + ' on codeswithpankaj.com');
  index++;
}

In this example:

• The variable index is initialized to 0.

• The while loop checks if index is less than the length of the topics array.

• As long as the condition is true, the code inside the loop (console.log('Learn ' + topics[index] + ' on codeswithpankaj.com'); index++;) generates a message for each tutorial topic.

Best Practices

1. Avoid Infinite Loops: Make sure the loop has a terminating condition to avoid infinite loops that can crash your program.

   // Incorrect - This will create an infinite loop
   let i = 0;
   while (i >= 0) {
     console.log(i);
   }

2. Initialize Loop Control Variables Properly: Ensure that the loop control variables are properly initialized and updated within the loop.

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

3. Use do...while for At Least One Execution: Use the do...while loop when you need the code block to execute at least once, regardless of the condition.

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

Summary

The while loop and the do...while loop are useful control structures in JavaScript for repeating a block of code based on a condition. By understanding their syntax and usage, you can effectively perform repeated tasks in your programs. Practice using the while loop to master control structures in JavaScript with codeswithpankaj.com.

---