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 sincei
is equal to 0, the conditioni < 10
returnstrue
. - Since the loop condition is
true
, the loop bodyconsole.log( i );
is then executed printing the value ofi
to console. - The index is then incremented by
i++
which simply means incrementi
by 1. - The value of
i
is now 1, the condition is tested again, the loop body then executed andi
incremented again. - The process continues repeating until the value of
i
reaches 10 whereby now the conditioni < 10
is 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 conditioni
is 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 = 0
is first executed. - next the condition
i < 3
is checked before every iteration, if it evaluates tofalse
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.