How To Loop Using JavaScript?

You can Loop using JavaScript to execute the same block of code a specified number of times or while a specified condition is true. In JavaScript, there are two different kinds of loops which are for loop, which loops through a block of code a specified number of times, and while loop, which loops through a block of code while a specified condition is true.

Table of Contents

JavaScript For Loop

The for loop is used when you know in advance how many times the script should run.

Syntax:

for(var=startvalue; var<=endvalue;var=var+increment)
{
code to be executed
}

Example:

<script type="text/javascript">
var i=0
for (i=0;i<=10;i++){
document.write("The number is" +i)
document.write("<br/>")}
</script>

The above example defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. “i” will increase by 1 each time the loop runs.

Preview:

JavaScript While Loop

The while loop is used when you want the loop to execute and continue executing while the specified condition is true.

Syntax:

while (var<=endvalue){
code to be executed
}

Example:

<script type="text/javascript">
var i=0
while(i<=10){
document.write("The number is "+i)
document.write("<br/>")
i=i+1
}
</script>

The example above defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 10. I will increase by 1 each time the loop runs.

Preview:

JavaScript do …. while loop

The do …. while loop is a variant of the while loop. This loop will always execute a block of code Once, and then it will repeat the loop as long as the specified condition is true. It is always executed at least once, even if the condition is false because the code is executed before the condition is tested.

Syntax:

do
{
code to be executed
}
while (var<=endvalue)

Example:

<script type="text/Javascript">
var i=0
do{
document.write("The number is "+i)
document.write("<br/>")
i=i+1
}
while (i<=10)
</script>

Preview:

JavaScript Break and Continue Statements

We can use two special statements inside the loops: break and continue.

Break Statement

The break command will break the loop and continue executing the code that follows after the loop.

Example:

<script type="text/javascript">
var i=0
for(i=0;i<=10;i++)
{
if (i==3) {break}
document.write("The number is " +i)
document.write("<br/>")
}
</script>

Preview:

Continue Statement

The continue command will break the current loop and continue with the next value.

Example:

<script type="text/javascript">
var i=0
for(i=0;i<=10;i++){
if (i==3) {continue}
document.write("The number is " +i)
document.write("<br/>")
}
</script>

Preview:

Here is a video tutorial created by webucator from this blog post.