Loop in JavaScript with Example

Previous Next

In this JavaScript tutorial, we are going to learn "Loops in JavaScript", "JavaScript Loops Example" and Different Types of Loop in JavaScript with Examples:

What are Loops in JavaScript?

• Loops are used to iterate the program on given conditions.

• Or loops are used to repeat the code block on given conditions until the condition is false.

• Conditions in looping return true or false.

• Loops in JavaScript are: for, while, do-while, for each.

Different Types of Loop in JavaScript with Example

1. for loop

The for loop is commonly used to run code until the given conditions are false. This loop is used to iterate a block of code for a specified number of times.

Syntax:

for (initialization; condition; iteration) {

    // code to be executed

}

Explanation:

1. Initialization: In this, we initialize a variable for a starting value of a variable that will be used in the loop. It basically happens when loop starts and it is executed only once.

2. Condition: This is a boolean expression that is checked before each iteration of the loop. If the condition is true, then it will execute the code inside the loop and if the condition is false, then the loop terminates, and the program continues with the code after the loop.

3. Iteration: It is executed after each iteration of the loop. It basically updates the variable that was initialized in the first step. The iteration component can increment or decrement the value of the variable.

Example:

for (let i = 1; i <= 9; i++) {

    console.log(' ', + i);

}

// Output:

1

2

3

4

5

6

7

8

9

2. while loop

In the while loop, the code will be executed until the given condition does not become false.

Syntax:

while (condition) {

    // code to be executed

}

Code Explanation: This loop executes if the condition is true. Let's assume that any given condition is true so, then it will execute the code inside the while loops, else if the condition is false then it will terminate the loop.

Example:

let num = 0;

while (num < 10) {

    console.log(' ' + num);

    num++;

}

// Output:

0

1

2

3

4

5

6

7

8

9

3. do while loop

This is similar to while loop but in this the code will execute at least once then it will execute according to the condition.

Syntax:

do {

    // code to be executed

} while (condition);

Code Explanation: do-while loops work similarly while loop but it executes at least once before checking the while condition. And if the condition is true then it will execute code inside do { } else it will terminate the program.

Example:

let num = 1;

do {

    console.log(' ' + num);

    num++;

} while (num <= 10);

// Output:

1

2

3

4

5

6

7

8

9

10

4. for...in loop

The for...in loop is used to iterate over the properties of an object.

Syntax:

for (variable in object) {

    // code to be executed

}

Code Explanation: 

1. This loop starts by defining a variable that will represent each property of the object. This variable is usually referred to as variable. In each iteration, variable will be assigned the name of the current property.

2. The in keyword is used to specify the object over which the loop should iterate. The object refers to the object you want to loop through.

3. Inside the loop block, we can write the code that will be executed for each property of the object.

Example:

const student = {

    name: "Raju",

    age: 20,

    country: "India"

};

for (let key in student) {

    console.log(key + ": " + student[key]);

}

// Output:

name: Raju

age: 20

country: India

5. for...of loop

The for...of loop is used to iterate over iterable objects such as arrays, strings, or collections.

Syntax:

for (variable of iterable) {

    // code to be executed

}

Code Explanation: 

1. The loop starts by defining a variable that represents each element of the object or an array. This variable is usually referred to as variable. In each iteration, variable will be assigned the value of the current element.

2. The of keyword is used to specify the iterable object over which the loop should iterate.

3. Inside the loop block, we can write the code that will be executed for each element of the iterable.

Example:

const courses = ["HTML", "CSS", "JavaScript", "ReactJS"];

for (let course of courses) {

    console.log(course);

}

// Output:

HTML

CSS

JavaScript

ReactJS

Previous Next