Loops and Iteration in Javascript...

Hello Coders... After a day's break, I am back again. Sometimes breaks are essential for refreshing. So without wasting much time directly going to the topic. We are going to discuss Javascript Loops today. But three loops in this article. Other two we will read in forthcoming articles.

In programming, loops are used to repeat a block of code. For example, if you want to show a message 100 times, then you can use a loop. It's just a simple example; you can achieve much more with loops.

Javascript for loop

The syntax of the for loop is:

for (initialExpression; condition; updateExpression) {
    // for loop body
}

Here,

1. The initialExpression initializes and/or declares variables and executes only once.

2. The condition is evaluated.

   • If the condition is false, the for loop is terminated.

   • If the condition is true, the block of code inside of the for loop is executed.

3. The updateExpression updates the value of initialExpression when the condition is true.

4. The condition is evaluated again. This process continues until the condition is false.

Example

Display a text five times-

// program to display text 5 times
const n = 5;

// looping from i = 1 to 5
for (let i = 1; i <= n; i++) {
    console.log(`I love JavaScript.`);
}

Output

I love JavaScript.
I love JavaScript.
I love JavaScript.
I love JavaScript.
I love JavaScript.

Here is how this program works.

n = 5 | true | I love JavaScript. is printed.
i is increased to 2. | | 2nd | i = 2
n = 5 | true | I love JavaScript. is printed.
i is increased to 3. | | 3rd | i = 3
n = 5 | true | I love JavaScript. is printed.
i is increased to 4. | | 4th | i = 4
n = 5 | true | I love JavaScript. is printed.
i is increased to 5. | | 5th | i = 5
n = 5 | true | I love JavaScript. is printed.
i is increased to 6. | | 6th | i = 6
n = 5 | false | The loop is terminated. |

Javascript while loop

The syntax of the while loop is:

while (condition) {
    // body of loop
}

Here,

1. A while loop evaluates the condition inside the parenthesis ().

2. If the condition evaluates to true, the code inside the while loop is executed.

3. The condition is evaluated again.

4. This process continues until the condition is false.

5. When the condition evaluates to false, the loop stops.

Example

// program to display numbers from 1 to 5
// initialize the variable
let i = 1, n = 5;

// while loop from i = 1 to 5
while (i <= n) {
    console.log(i);
    i += 1;
}

Output

1
2
3
4
5

Here is how this program works.

n = 5 | true | 1 is printed. i is increased to 2. | | 2nd | i = 2
n = 5 | true | 2 is printed. i is increased to 3. | | 3rd | i = 3
n = 5 | true | 3 is printed. i is increased to 4. | | 4th | i = 4
n = 5 | true | 4 is printed. i is increased to 5. | | 5th | i = 5
n = 5 | true | 5 is printed. i is increased to 6. | | 6th | i = 6
n = 5 | false | The loop is terminated |

Javascript do...while loop

The syntax of do...while loop is:

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

Here,

1. The body of the loop is executed at first. Then the condition is evaluated.

2. If the condition evaluates to true, the body of the loop inside the do statement is executed again.

3. The condition is evaluated once again.

4. If the condition evaluates to true, the body of the loop inside the do statement is executed again.

5. This process continues until the condition evaluates to false. Then the loop stops.

Note: do...while loop is similar to the while loop. The only difference is that in do…while loop, the body of loop is executed at least once.

// program to display numbers
let i = 1;
const n = 5;

// do...while loop from 1 to 5
do {
    console.log(i);
    i++;
} while(i <= n);

Output

1
2
3
4
5

Here is how this program works.

n = 5 | not checked | 1 is printed. i is increased to 2. | | 1st | i = 2
n = 5 | true | 2 is printed. i is increased to 3. | | 2nd | i = 3
n = 5 | true | 3 is printed. i is increased to 4. | | 3rd | i = 4
n = 5 | true | 4 is printed. i is increased to 5. | | 4th | i = 5
n = 5 | true | 5 is printed. i is increased to 6. | | 5th | i = 6
n = 5 | false | The loop is terminated |

for vs while loop

A for loop is usually used when the number of iterations is known. For example,

// this loop is iterated 5 times
for (let i = 1; i <=5; ++i) {
   // body of loop
}

And while and do...while loops are usually used when the number of iterations are unknown. For example,

while (condition) {
    // body of loop
}

Infinite while Loop

If the condition of a loop is always true, the loop runs for infinite times (until the memory is full). For example,

// infinite while loop
while(true){
    // body of loop
}

Here is an example of an infinite do...while loop.

// infinite do...while loop
const count = 1;
do {
   // body of loop
} while(count == 1)

In the above programs, the condition is always true. Hence, the loop body will run for infinite times.