JavaScript Loops

In JavaScript, loops are used when we want to perform an action repeatedly for a given number of times. For example when we want to list the odd numbers between two intervals, the best way is to loop through each number, testing if its divisible by 2 or not.

The `while` loop

The while loop keeps on running as long as the condition being tested is true.

Syntax:

while (condition) {
  // code to be looped
}

For example, lets write a loop that lists all integers from 0 to 9 inclusive.

//the loop starts at 0
let i = 0;

// condition is true while i is less than 10
while (i < 10) {
  console.log( i );
  
  // increment i
  i++;
}

/* Output
0
1
2
3
4
5
6
7
8
9
*/

In the example above, variable i is used as the loop index.

Since this loop is supposed to start counting from 0, 0 first is assigned to i.
The condition i < 10 is then tested, and since i is equal to 0, the condition i < 10 returns true.
Since the loop condition is true, the loop body console.log( i ); is then executed printing the value of i to console.
The index is then incremented by i++ which simply means increment i by 1.
The value of i is now 1, the condition is tested again, the loop body then executed and i incremented again.
The process continues repeating until the value of i reaches 10 whereby now the condition i < 10 is now false. When the condition becomes false, the loop stops. The loop body is not executed which means 10 is not printed.

An execution of the loop body is called an iteration. This means the loop in the example above makes 10 iterations (from 0 to 9).

The increment operator i++ makes sure that we move to the next value after every iteration. If we leave it out, the loop would theoretically repeat forever.

Any data type can be used as a loop condition. JavaScript would simply first convert it boolean before testing it.

let i = 5;

while(i){
console.log(i);
i--;
}

/* output
5
4
3
2
1
*/

In the example above the boolean value of i is the condition so on:

iteration 1 – the value of i is 5 which evaluates to boolean true. 5 is then logged and decremented by i--.
iteration 2 – the value of i is 4 which evaluates to boolean true. 4 is then logged and decremented by i--.
iteration 3 – the value of i is 3 which evaluates to boolean true. 3 is then logged and decremented by i--.
iteration 4 – the value of i is 2 which evaluates to boolean true. 2 is then logged and decremented by i--.
iteration 5 – the value of i is 1 which evaluates to boolean true. 1 is then logged and decremented by i--.
iteration 5 – the value of i is 0 which evaluates to boolean false. The loop stops because the condition i is now false.

The `do..while` loop

In the do..while loop, the loop body is first executed and then the condition is tested. This is basically an inverted while loop.

Syntax:

do {
  // loop body
} while (condition);

Example:

let i = 5;

do{
console.log(i);
i--;
} while(i)

/* output
5
4
3
2
1
*/

The main difference between a while loop and a do..while loop is that a do..while loop is guaranteed to run at least once.

The `for` loop

The for loop is the most popular loop among developers.

Syntax:

for (start; condition; step) {
  // loop body
}

start is the initial value of the loop variable. condition is the loop condition. step is the value of the loop increment.

For example:

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

/* output
0
1
2
3
4
5
*/

Here is how the for loop works:

the initialisation statement i = 0 is first executed.
next the condition i < 3 is checked before every iteration, if it evaluates to false the loop stops.
The index is incremented i++ after the body is executed.

In short the iterations works like:

if condition is true → execute loop body → increment index

In the above examples, we were initialising our for loops using inline declaration. This puts the scope of our variable i in the loop. If we then try to access the value of i outside the loop we get a reference error because i exists only inside the loop. For example:

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

console.log(i);

/* output
0
1

line:5
console.log(i);
            ^
ReferenceError: i is not defined
*/

The example above also illustrates one of the differences between let and var declarations. let declares variables that are block-scope are not accessible outside the block. var declares variables that can be accessed outside the enclosing block. If you wanted to access the varible i outside the for loop, you would have to use var. For example:

for (var i = 0; i < 2; i++) {
  console.log(i);
}

console.log(i);

/* output
0
1
2
*/

Another way is to use the let declaration outside the loop in order to give the variable a higher level scope. For example:

let i;

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

console.log(i);

/* output
0
1
2
*/

The for loop can even be used without the initialisation statement. In this case we will be using an already declared variable:

let i = 0;

for ( ; i < 2; i++) {
  console.log(i);
}

console.log(i);

/* output
0
1
2
*/

We can even remove the increment part and move it into the loop body:

let i = 0;

for ( ; i < 2;) {
  console.log(i);
  i++;
}

console.log(i);

/* output
0
1
2
*/

If we remove everything, it becomes an infinite loop:

let i = 0;

for ( ; ;) {
  console.log(i);
  i++;
}

Breaking out of a loop

We can break out of a loop even before the condition evaluates to false using the break; statement.

let i = 0;

for ( ; i < 10 ; i++ ) {
  console.log(i);
  
  if (i==5){
  	break;
  	}
  	
}

/* output
0
1
2
3
4
5
*/

In the example above the condition evaluates to false when i becomes 10, but however there is a break directive that is matched when i reaches 5. The loop stops there.

Continuing to the next iteration

The continue; statement stops the current iteration and skips to the next. For example:

let i = 0;

for ( ; i < 10 ; i++ ) {
  
  if (i % 2 == 0){
  	continue;
  	}
  	
  	console.log(i);
  	
}

/* output
1
3
5
7
9
*/

In the above example, if the i % 2 == 0 is true (meaning the remainder of i divided by 2 is 0) the continue directive is triggered and that iteration is skipped. This means that all "even" iterations are skipped.

JavaScript Loops