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 < 10is then tested, and sinceiis equal to 0, the conditioni < 10returnstrue. - Since the loop condition is
true, the loop bodyconsole.log( i );is then executed printing the value ofito console. - The index is then incremented by
i++which simply means incrementiby 1. - The value of
iis now 1, the condition is tested again, the loop body then executed andiincremented again. - The process continues repeating until the value of
ireaches 10 whereby now the conditioni < 10is nowfalse. 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 byi--. - iteration 2 – the value of i is 4 which evaluates to boolean
true. 4 is then logged and decremented byi--. - iteration 3 – the value of i is 3 which evaluates to boolean
true. 3 is then logged and decremented byi--. - iteration 4 – the value of i is 2 which evaluates to boolean
true. 2 is then logged and decremented byi--. - iteration 5 – the value of i is 1 which evaluates to boolean
true. 1 is then logged and decremented byi--. - iteration 5 – the value of i is 0 which evaluates to boolean
false. The loop stops because the conditioniis nowfalse.
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 = 0is first executed. - next the condition
i < 3is checked before every iteration, if it evaluates tofalsethe 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.