JavaScript Loops

« Previous Tutorial Next Tutorial »

Loops or iteration statements are control flow statements that allows you to execute group of statements several number of times.

There are the following three loops provided by JavaScript:

Here is an example. Instead of this code fragment:

fruits = fruits + fruit[0] + "<br>"; 
fruits = fruits + fruit[1] + "<br>"; 
fruits = fruits + fruit[2] + "<br>"; 
fruits = fruits + fruit[3] + "<br>"; 
fruits = fruits + fruit[4] + "<br>"; 
fruits = fruits + fruit[5] + "<br>";

You can write :

for(i = 0; i < fruit.length; i++)
{ 
    fruits = fruits + fruit[i] + "<br>";
}

JavaScript Loops Example

Here is an example demonstrates loop in JavaScript.

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Loops Example</title>
	<script>
		function loop_fun1()
		{
			var num ='';
			var i;
			for (i = 1; i <= 10; i++)
			{
				num = num + i + "<br>";
			}
			document.getElementById("loop_para1").innerHTML = num;
		}
	</script>
</head>
<body>

<p>Click on the <b>Start Loop</b> button to start the loop.</p>
<button onclick="loop_fun1()">Start Loop</button>
<p id="loop_para1"></p>

</body>
</html>

Here is the output produced by the above JavaScript loop example program. This is the initial output:

This is the output produced after clicking on the Start Loop button:

Here is the live demo output of the above loop example in JavaScript.

Click on the Start Loop button to start the loop.

Below is another example on loop in JavaScript.

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Loop Example</title>
	<script>
		function loop_fun2()
		{
			var num ='';
			var i=1;
			while(i <= 10)
			{
				num +=  i + "<br>";
				i++;
			}
			document.getElementById("loop_para2").innerHTML = num;
		}
	</script>
</head>
<body>

<p>Click on the <b>Start Loop</b> button to start the Loop.</p>
<button onclick="loop_fun2()">Start Loop</button>
<p id="loop_para2"></p>

</body>
</html>

Here is the sample output produced by the above example of loop in JavaScript.

Now click on the Start Loop button, you will watch the following output:

Here is the live demo output of the above loop example in JavaScript.

Click on the Start Loop button to start the Loop.

Let's take another example demonstrating looping in JavaScript.

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Loop Program</title>
	<script>
		function loop_fun3()
		{
			var num ='';
			var i=1;
			do
			{
				num +=  i + "<br>";
				i++;
			} while(i<=10);
			document.getElementById("loop_para3").innerHTML = num;
	}
	</script>
</head>
<body>

<p>Click on the <b>Start Loop</b> button to start the Loop.</p>
<button onclick="loop_fun3()">Start Loop</button>
<p id="loop_para3"></p>

</body>
</html>

Here is the live demo output of the above looping program in JavaScript.

Click on the Start Loop button to start the Loop.

JavaScript Infinite Loop

Infinite loop means a loop that runs forever. Here is an example of infinite loop in JavaScript.

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Infinite Loop Example</title>
	<script>
		function loop_fun4()
		{
			var num ='';
			var i=1;
			for (;;)
			{
				num +=  i + "<br>";
			}
			document.getElementById("loop_para4").innerHTML = num;
		}
	</script>
</head>
<body>

<p>Click the <b>Start Infinite Loop</b> button to loop infinite times</p>
<button onclick="loop_fun4()">Start Infinite Loop</button>
<p id="loop_para4"></p>

</body>
</html>

If you want to watch the effect of infinite loop, just click on the below Start Infinite Loop button.

We recommend, don't use it into your main browser, specially if you are opened some important windows because it may crash your browser

Click the Start Infinite Loop button to loop infinite times

Note - Make sure, you have not open any important document into your computer specially into this browser which you are using right now

Precaution - If your browser will get stopped, then immediately close this window, if it will not, then close the whole browser

JavaScript Online Test

« Previous Tutorial Next Tutorial »