JavaScript for Loop

JavaScript for Loop is used to execute a particular code block multiple times until a given condition holds true or until all the elements of a given JavaScript object like Array or List are completely traversed.

There are times when we would want to perform a certain operation a certain number of times, like if we have a list of employees with their salaries and we have to calculate their income tax. Now the formula for getting the income tax is the same for all employees, so we can have a loop and execute the code statements with different inputs.

Similarly, for a use case like printing the mathematical table of a number like 2, we can simply have a loop in place to keep on multiplying the number with 1, 2, 3, 4, and so on till 10, incrementing the multiplication factor every time.

The number of times a group of statements is executed depends on a condition provided in the loop, or if we are using the for loop to traverse an array, list, etc, then the loop executes until complete traversal.

The loop statements are executed until the condition becomes false. When the condition becomes false, the execution of loop stops.

In JavaScript, there are various types of loops.

• for loop

• for-in loop

• for-of loop

• while loop

• do-while loop

In this tutorial, we will cover the first three loops and we will cover the other in the next tutorial.

JavaScript for Loop

If you want to execute statements for a specific number of times then you can use the JavaScript for loop, which lets you iterate the statements for a fixed number of times.

The for loop consists of three statements to work:

• initialization: here, the loop counter is initialized with its initial value.

• condition: here, the condition statement is provided which is checked each time with respect to the value of the counter to continue the iteration.

• iteration: this statement lets you decide whether you want to increase or decrease the initial counter value also known as increment/decrement.

JavaScript for Loop: Syntax

Following is the syntax for the for loop:

for(initialization; condition; iteration)
{
    // statements
}

The idea here is to initialize a counter, set a condition until which the loop will run, and keep on incrementing or decrementing the counter so that after certain iteration the condition fails, and the loop exits. If the condition never fails, the loop will keep on executing infinitely.

JavaScript for Loop: Example

Let's take an example to see how the loop works,

JavaScript for...in Loop

If you want to loop through the properties of a JavaScript Object then you can use the JavaScript for…in loop. The for/in loop automatically iterates over the fields of an object and the loop stops when all the fields are iterated.

JavaScript for/in Loop: Syntax

Let's see the syntax for using the for/in loop in JavaScript.

for(key in object)
{
    // code statements
}

When the loop will run, every time the key will get the value of the key using which we can access the value against it in the object. In JavaScript, objects are in format {"key1":"value1","key2":"value2", ...} for which the for/in loop can be used to iterate over all the fields of JavaScript object.

JavaScript for...in Loop: Example

Let's take an example to see it in action,

JavaScript for...of Loop

The JavaScript for/of loop lets you loop through the values of an iterable object like an array, strings and more.

JavaScript for...of Loop: Syntax

The syntax for the for/of loop in JavaScript is similar to that of for/in loop.

for(variable of iterable)
{
    //code here
}

JavaScript for...of Loop: Example

Below is an example in which we will traverse an array using the for/of loop.

let abc = ['BMW','FERARI','VOLVO'];
let y;
for(y of abc)
{
    document.write(y+,"<br>");
}

In this tutorial, we explained for loop, for/in loop, for/of loop used in the JavaScript. We have explained how this can be used to execute statements in a simple for loop, then iterating over JavaScript object and iterating over array, etc. In the next tutorial we will learn about while and do...while loop.

Also Read :- Building a Tic Tac Toe Game in JavaScript