Skip to content

Loops

Loops are a mechanism that allows you to repeatedly execute a certain block of code. JavaScript offers the following loop types:

  • for
  • while
  • do while

for loop

The general structure of the loop for

for (initial_statement; conditional_statement; modifying_statement ) {
// instructions to be executed
}

This loop consists of three expressions, separated by ; characters, and each expression is optional:

  • the initial statement, is most commonly used to initialize the variable used as a counter for the number of loop executions

  • a conditional statement specifies the condition that must be met in order to make the next loop iteration

  • the modifying statement is executed after an instruction has been executed inside the body of the loop and is usually used to modify a counter variable

The following examples show the use of for loops:

for (let i = 0; i < 3; i++) {
    console.log(i);
}

for (;;) {} // endless loop

while loop

The while loop is used, like the for loop, to perform repetitive actions. The for loop is most commonly used when the number of repetitions is known, while the while loop is used when the number of repetitions is not known and the end of the loop is subject to a condition.

The syntax of the while loop is as follows:

while (condition) {
// instructions
}

The code fragment will be repeated until the condition tested in parentheses is true, e.g:

let numbers = [1, 2, 3, 4];

while (numbers.length > 0) {
  console.log(`I just removed ${numbers.shift()} in a while loop`);
}
/* Result:
I just removed 1 in a while loop
I just removed 2 in a while loop
I just removed 3 in a while loop
I just removed 4 in a while loop
*/

do while loop

The do while loop is very similar to the while loop. The only difference between these loops is that the code in the body of the loop to... while, which is to be repeated, will be executed before checking the expression. This means that the instructions from inside the loop to... while are executed always at least one time, even if the check condition is false. The general form of the loop do...while is as follows:

do {
// instructions
} while (condition); 

Example:

let emptyArray = [];

do {
  emptyArray.shift();
} while (emptyArray.length > 0);

Breaking the loop

The operation of each loop can be interrupted at any time by means of the break instruction. Calling this instruction inside the loop will terminate it immediately. The conditions for continuing the loop in this case are not checked. This instruction can be used in any type of loop (for, while, do while), e.g:

let numbers = [1, 2, 3, 4];

while (numbers.length > 0) {
  if (numbers[0] % 2 === 0) {
    break;
  }
  console.log(`I just removed ${numbers.shift()} in a while loop`);
}
// only "I just removed 1 in a while loop" will be displayed on the screen

Continuation of the loop

The use of the continue instruction inside the loop causes it to proceed to its next iteration. So if there is a continue instruction inside the loop, the current iteration will be aborted and the next iteration will start (or exit the loop for the last iteration), e.g:

let numbers = [1, 2, 3, 4];

while (numbers.length > 0) {
  if (numbers[0] % 2 === 0) {
    numbers.shift(); 
    continue;
  }
  console.log(`I just removed ${numbers.shift()} in a while loop`);
}

/* These lines will be displayed on the console:
I just removed 1 in a while loop
I just removed 3 in a while loop
*/