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
BMWVolvo
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
BMWVolvo
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
SaabFord
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
BMWVolvo
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