JS Loop For

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript For Loop

To run the same code over and over again, each time with a different value.

Instead of writing:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For Loop</h2>

<p id=”demo”></p>

<script>

const cars = [“BMW”, “Volvo”, “Saab”, “Ford”, “Fiat”, “Audi”];

let text = “”;

for (let i = 0; i < cars.length; i++) {

  text += cars[i] + “<br>”;

}

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript For Loop

BMW
Volvo
Saab
Ford
Fiat
Audi

Different Kinds of Loops

JavaScript has different kinds of loops:

for – loops through a block of code a number of times.

for/in – loops through the properties of an object.

for/of – loops through the values of an iterable object.

while – loops through a block of code while a specified condition is true.

do/while – also loops through a block of code while a specified condition is true.

The For Loop

The syntax for loop:

for (statement 1; statement 2; statement 3) {

  // code block to be executed

}

Statement 1 is executed (one time) before the execution of the code block.

Statement 2 specifies the condition for executing the code block.

Statement 3 is executed (every time) after the code block has been executed.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For Loop</h2>

<p id=”demo”></p>

<script>

let text = “”;

for (let i = 0; i < 5; i++) {

  text += “The number is ” + i + “<br>”;

}

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript For Loop

Statement 1

Using the statement 1 to initialize the variable used in the loop (let i = 0). Statement 1 is optional.

You can initiate many values in statement 1 (separated by comma):

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For Loop</h2>

<p id=”demo”></p>

<script>

const cars = [“BMW”, “Volvo”, “Saab”, “Ford”];

let i, len, text;

for (i = 0, len = cars.length, text = “”; i < len; i++) {

  text += cars[i] + “<br>”;

}

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript For Loop

BMW
Volvo
Saab
Ford

And statement 1 can be omitted (like when your values are set before the loop starts):

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For Loop</h2>

<p id=”demo”></p>

<script>

const cars = [“BMW”, “Volvo”, “Saab”, “Ford”];

let i = 2;

let len = cars.length;

let text = “”;

for (; i < len; i++) {

  text += cars[i] + “<br>”;

}

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript For Loop

Saab
Ford

Statement 2

Often statement 2 evaluates the condition of the initial variable.

Statement 2 is also optional.

If statement 2 returns true, the loop starts over again, if it returns false, the loop will end.

Statement 3

Statement 3 is used to increment the value of the initial variable.

Statement 3 is optional.

Statement 3 can work with anything like negative increment (i–), positive increment (i = i + 15), or anything else.

Statement 3 can be omitted (like when you increment your values inside the loop):

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript For Loop</h2>

<p id=”demo”></p>

<script>

const cars = [“BMW”, “Volvo”, “Saab”, “Ford”];

let i = 0;

let len = cars.length;

let text = “”;

for (; i < len; ) {

  text += cars[i] + “<br>”;

  i++;

}

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript For Loop

BMW
Volvo
Saab
Ford

Loop Scope

Using var in a loop:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript let</h2>

<p id=”demo”></p>

<script>

var i = 5;

for (var i = 0; i < 10; i++) {

  // some statements

}

document.getElementById(“demo”).innerHTML = i;

</script>

</body>

</html>

Output

JavaScript let

Using let in a loop

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript let</h2>

<p id=”demo”></p>

<script>

let i = 5;

for (let i = 0; i < 10; i++) {

  // some statements

}

document.getElementById(“demo”).innerHTML = i;

</script>

</body>

</html>

Output

JavaScript let

5