Loops JavaScript
In every programming language, looping is a very important concept. There are situations where you have to iterate a particular code statement with minor changes in every iteration, you can achieve it using loops. Without Loops, you have to write the code statement as many times as you want it to iterate. For instance, If you want to repeat a Statement Hello 9 times, without loops your code will look like this:
console.log(“Hello”); console.log(“Hello”); console.log(“Hello”); console.log(“Hello”); console.log(“Hello”); console.log(“Hello”); console.log(“Hello”); console.log(“Hello”); console.log(“Hello”);
  On the other hand, with a loop, you can write it like this:

var count = 1;

while(count<10){
    console.log("Hello");
    count++;
}
In this tutorial, we are going to understand different types of JavaScript loops with examples. However, before that let’s understand how loops work?

Working of Loops

In Loops, there is a condition that is checked after/before every iteration of a code block, if the condition is satisfied or achieved, the execution will stop, and flow control will move out of the loop. Whereas, if the condition is not achieved, the loop will be executed again.

Types of Loops

In the above section, it is mentioned that there is a condition in every loop that is checked in each iteration. Now, based on when the condition is checked, loops are categorized. There are two categories of loops in JavaScript: Entry Controlled: Loops in which the condition is checked before the execution of the code block (loop body) is termed as entry controlled loop. for loop and while loop are classified as entry controlled loop. Exit Controlled: Loops in which the condition is checked after the execution of the code block (loop body) are termed exit controlled loops. In exit-controlled loops, the code block will be executed at least once. The “do-while” loop is classified as an exit controlled loop. Now, let’s jump on to the JavaScript loops:

JavaScript for Loop

The JS for Loop is among the easiest loops when it comes to the ease of dubbing. It has three mandatory expressions: initialization, condition, and update. Syntax:

for([initialisation]; [condition]; [UpdateExpression])
{
    //loop body
}
  • Using the initialization expression, one or more counters are initialized.
  • The condition expression is evaluated after every execution of the loop body. It involves the counter created in the initialization expression.
  • The update expression is executed after every successful execution of the loop body. This loop body either increments or decrements the counter which is created in the initialization expression.
Refer to the flow chart below for a better understanding of the for loop:
javascripts loop
Example:

for(let i = 1; i<6; i++) { console.log("Welcome to the tutorial, User ->"+i);
}
Output:
Welcome to the tutorial, User ->1 Welcome to the tutorial, User ->2 Welcome to the tutorial, User ->3 Welcome to the tutorial, User ->4 Welcome to the tutorial, User ->5
  In the above example, the counter i is initialized with the integer value 1, the condition is i<6 i.e, the loop body will be executed until the value of i is less than 6. Using the incremental expression, i++, the value of i is increased after every iteration.

JavaScript while Loop

The JavaScript while loop is more of a very straightforward loop. It only requires a condition and update expression is included in the loop body. Whereas the initialization expression must be placed somewhere in the program above the loop. In some cases, counter initialization is not even required if you are planning to take input from the user and use it directly in the condition. However, in such cases, you have to write the update expression which includes the same variable. Syntax:

while(condition)
{
    //loop body
    //update expression
}
Refer to the image attached below for a better understanding:
javascripts loop
Example:

var x = 23;

while(x < 26)
{
    console.log("The value is:"+x);
    
    //incremental expression
    x++;
}
Output:
The value is:23 The value is:24 The value is:25
  Note: If you won’t include an update expression in the loop body, there will be an infinite iteration of the code block.

JavaScript do-while Loop

In the JavaScript do-while loop, the loop body is written in the do scope, followed by the condition in the while scope. Syntax:

do
{
    //loop body
    //update expression
}
while(condition);
As mentioned above, the do-while loop belongs to the exit control type because the condition is placed after the loop body. Therefore, the first execution will take place irrespective of the condition. Later, after the first execution, if the condition is not achieved, there won’t be any more executions. Refer to the flow chart for better understanding:
flow java loop
Example:

var i = 5;

do
{
    console.log("The value of variable is:"+i);
    //update expression
    i++;
}
while(i<5);
Output:
The value of variable is:5
  In the above example, even though the value of variable i is 5 and it doesn’t fulfill the condition (i<5), but still there is an output, it is because the body is placed before the condition.

JavaScript for in Loop

JavaScript also has an improved version of for loop i.e., for in loop. This loop is majorly used while working with the objects. It doesn’t have any initialization expression and update expression. Syntax:

for(variable in Object)
{
    //loop body
}
In this loop, the index of each element of the object is assigned to the variable before every iteration and then the loop body will be executed. The total number of iterations will be determined by the total number of elements in the object. Example:

const studentName = ["Ankit","Aman","Bablu","Kishan"];

for(let item in studentName)
{
 console.log("Welcome:"+studentName[item]);   
}
Output:
Welcome:Ankit Welcome:Aman Welcome:Bablu Welcome:Kishan
 

Summary

JavaScript loops help you iterate a particular code block multiple times. In loops, you can set a counter and as soon as the condition is reached, the iteration of the code block will stop. While using a JavaScript loop, you must ensure that it doesn’t have a counter that is unachievable, it will enable your loop to execute infinite times which will ultimately result in a system ran out of memory error. You will be able to have a strong grip on these loops once you have practiced them at least 5-10 times. In case you have any doubts, let us know in the comments, and we will discuss it further.
Leave a Reply