What is a loop?
Suppose you want to do an action more than once such as printing a message 10 times. A simple way of doing this to write console.log('')
10 times but this is not the right way since it makes the code repetitive and difficult to maintain. A simpler approach is to use loops.
Loops are used to perform the same task or execute the same code multiple number of times. Statements of a loop are enclosed between curly braces. Entire loop statement along with its statements is called loop block.
Javascript provides many different kinds of loops though all of those loops provide the same functionality. Different kinds of loops available in javascript are:
1. For loop
2. While loop
3. Do…while loop
4. For…in
5. For…of
This page will explore for
loop in detail.
For loop
This loop is called a for
loop as it uses for keyword. A for
loop uses a variable known as index variable to iterate over the loop statements.
Syntax
for(Initialization; Condition; Increment) {
// loop statements
}
From the above syntax, a for
loop consists of following three parts
A. Initialization
In this part, the index variable is initialized to some value. Example, let i = 0
B. Condition
Value of index variable is compared with another value. Example, i < 10
C. Increment
Index variable is incremented by some value. Example, i++
or i = i + 1
Control Flow
A for
loop follows below steps to execute its statements.
i. Index variable is initialized.
ii. Condition is checked. If the condition evaluates to true
, loop statements are executed else loop statements are not executed.
iii. After the loop statements are executed, index variable is incremented.
iv. Steps ii and iii repeat till the condition in step ii becomes false
.
Example
Below is a simple for
loop demonstrating the above concept. This loop executes 5 times. In every iteration, the value of index variable is printed so that it is easier to explain the control flow of loop.
for(let i = 0; i < 5; i++) { console.log("Learning for loop: " +i); }
Three parts of the loop from the above example will be:
Initialization: let i = 0;
Condition: i < 5;
Increment: i++;
It produces the below output
Learning for loop: 0
Learning for loop: 1
Learning for loop: 2
Learning for loop: 3
Learning for loop: 4
As evident from the output, the loop executes for 5 times with the value of index variable ranging from 0 to 4. As the value of index variable becomes 5, loop condition(i < 5
) becomes false
and the loop terminates.
More on for Loop
Following points are worth mentioning and should be remembered with respect to for loop.
1. A for
loop can also be a decreasing loop. That is, the last part of a for loop need not always be an increment part, it can also reduce the index variable. In that case, you need to initialize the loop variable and condition accordingly. Below is an example of a loop which executes in reverse order.
for(let i = 5; i > 0; i--) { console.log("Learning for loop: " +i); }
It produces the below output
Learning for loop: 5
Learning for loop: 4
Learning for loop: 3
Learning for loop: 2
Learning for loop: 1
2. Initialization part of for
loop is optional when the index variable is declared and initialized before the loop. Thus, below code is also valid.
let i = 0; for(; i < 5; i++) { console.log(i); }
3. Condition part is also optional but in that case the loop will become a non-terminating or infinite loop.
3. Increment/Decrement part of the loop is also optional. If you omit it, then you should increase/decrease the loop variable inside the loop body else the loop will keep on executing forever. Example,
for(let i = 0; i < 5;) { console.log("Learning for loop: " +i); i++; }
4. You can omit the parts of loop as shown above but you should place the semi-colon in place. Example,
let i = 0; for(; i < 5;) { console.log("Learning for loop: " +i); i++; }