- Home
- javascript Tutorial
- loops
Loops in Javascript
JavaScript supports different kinds of loops:
for - loops through a block of code a number of times
for/in - loops through the properties of an 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 for loop consists of three statements
Syntax:
for (statement 1; statement 2; statement 3) {
code block
}
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Output:
0
1
2
3
4
The For/In Loop
The for/in loop iterates through the properties of an object.
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var txt = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
Output:
John Doe 25
The while loop
The while loop keeps iterating through a block of code till the condition specified along with while is false.
Syntax:
while (condition) {
code block to be executed
}
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var text = "";
var i = 0;
while (i < 5) {
text += "<br>" + i;
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Output:
0
1
2
3
4
The condition is first evaluated. If true, the block of statements following the while statement is executed. This is repeated until the condition becomes false. This is known as a pre-test loop because the condition is evaluated before the block is executed.
The number++ statement is called the updater. Removing it will result in an infinite loop. You must always include a statement in a loop that guarantees the termination of the loop or else you'll run into this problem.
The Do/While Loop
The do-while loop is a variant of the while loop. The code block present in do is executed once after which the conditional statement in while is evaluated. This process keeps recurring till the stated condition in while becomes false
Syntax:
do {
code block to be executed
}
while (condition);
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var text = ""
var i = 0;
do {
text += "<br>" + i;
i++;
}
while (i < 5);
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Output:
0
1
2
3
4
The block following do is executed first and then the condition is evaluated. If the while condition is true, the block is executed again and repeats until the condition becomes false. This is known as a post-test loop as the condition is evaluated after the block has executed.
The do-while loop is executed at least once whereas the while loop may not execute at all. The do-while is typically used in a situation where the body of a loop contains a statement that generates a value that you want to use in your conditional expression.
Break statement
When javascript comes across break statement during the execution of a loop, it stops the execution of both the iteration and loop immediately. When javascript comes across continue statement during the execution of a loop, it stops the execution of the ongoing iteration and goes on to execute the next iteration.
Break Example:
var sum = 0; for (var i = 1; i <= 10000; i++) { sum += i; if (i === 50) { break; // immediately transfers control outside the for block } } alert("Sum = " + sum); // => Sum = 1275
Continue statement
When JavaScript encounters a continue statement in a loop it stops the execution of the current iteration and goes back to the beginning of the loop to begin the next iteration.
Continue Example:
for (var i = 1; i <= 10; i++)
{
if ((i % 2) != 0) {
continue;
}
alert(i); // => 2, 4, 6, 8, 10
}