Repeat Instructions With the while Loop in JavaScript

In programming, loops are control structures that allow you to repeat the execution of one or more statements until a certain condition is met.

loop {
  statements
}

Where:

• loop is a control structure like while or for.
• {} is the block statement used to group the statements executed by the loop.
• statements is a list of zero or more statements.

💡 The complete execution of all the statements of a loop is called an iteration.

The while loop

The while loop is used to execute a set of statements for as long as the specified condition remains true. This loop is mostly used when the total number of iterations is unknown and depends on something happening.

while (condition) {
  statements
}

💡 If on the first iteration the condition evaluates to false, none of the statements are executed and the loop terminates immediately.

⚠️ while loops can easily turn into infinite loops if you forget to update the value of the condition's variable(s) that will eventually make the condition false.

Example

Let's consider this script, that outputs a countdown:

let liftoff = false;
let countdown = 3;

while (liftoff === false) {
  console.log(countdown);
  countdown++;
  if (countdown === 0) {
    liftoff = true;
  }
}
console.log("Liftoff!");

When executed, it will:

1. Define a liftoff variable and initialize it with the boolean false. This variable will be used to determine whether the rocket has launched.

2. Define a countdown variable and initialize it with the integer 3. This variable will be used to keep track of the launch countdown.

3. Define a while loop that will run until liftoff evaluates to true.

   1. Output the current value of countdown.
   2. Decrement the value of countdown by 1.
   3. Set liftoff to true if countdown equals 0.

4. Output the string "Liftoff!".

Which will produce this output:

3
2
1
Liftoff!

Example

Let's consider this script, that prints all the divisors (or factors) of a number, which are the integers that evenly divide it:

const number = 22;
let divisor = number;

while (divisor > 0) {
  if (number % divisor === 0) {
    console.log(divisor);
  }
  --divisor;
}

When executed, it will:

1. Define a number variable and initialize it with the integer 22. This variable is the number to divide.

2. Define a divisor variable and initialize it with the value of the number variable. This variable will be used to find the list of divisors.

3. Define a while loop that will run until divisor is equal to or less than 0.

   1. Output the value of divisor if the remainder of the division of number by divisor equals 0 — which means that divisor evenly divides number.
   2. Decrement the value of divisor by 1.

Which will produce this output:

$ node print_divisors.js
22
11
2
1

💡 In JavaScript, the expression --variable is equivalent to variable = variable - 1.

The do...while loop

The do...while loop is used to execute a set of statements for as long as the specified condition remains true. This means that the loop will execute the statements at least once before the condition is evaluated.

do {
  statements
} while (condition);

Example

Let's consider this script, that outputs the multiplication table of a number:

const base = 3;
let multiplier = 1;
let result;

do {
  result = base * multiplier;
  console.log(base, '*', multiplier, '=', result);
  multiplier++;
} while(result < base * 10);

💡 In JavaScript, the console.log() function can be used to write multiple values to the standard output at once, when seperated by a comma character ,.

When executed, it will:

1. Define a base variable and initialize it with the integer 3.

2. Define a multiplier variable and initialize it with the integer 1.

3. Define a undefined result variable.

4. Define a do...while loop.

   1. Store the value of base multiplied by multiplier into result.
   2. Output the formatted operation and result.
   3. Increment the value of multiplier by 1.
   4. Check whether result is less than base multiplied by 10.

Which will produce this output:

$ node mult_table.js
3 * 1 = 3
3 * 2 = 6
3 * 3 = 9
3 * 4 = 12
3 * 5 = 15
3 * 6 = 18
3 * 7 = 21
3 * 8 = 24
3 * 9 = 27
3 * 10 = 30

💡 Since the do...while loop executes its instructions before evaluating its condition, we must use the < comparison operator rather than <=, as otherwise the loop would have stopped at 3 * 11 = 33.