JavaScript – Loops

As you know, a loop allows you to execute a block of code a number of times. In JavaScript, three types of loops are supported:

  1. While Loop
  2. Do…While Loop
  3. For Loop
  4. For…In Loop

Then we would also learn of some loop statement such as break and continue statements in the next section.

 

1. While Loop

The while loop is used to execute a block of code repeatedly so long as a test expression is true. The loop terminates once the expression is false. So for each iteration of the loop, the test expression is evaluated.

While loop

While loop

Example of a While Loop

<html>
	<head>
	<title>While Loop demo</title>
	</head>

	<body>

	<script type = "text/javascript">
		var counter = 0;
		document.write("Begining of while loop" + "<br />");
		
		while(counter < 10) {
			document.write("Current counter: " + counter + "<br />");
			counter ++;
		}
		document.write("End of while loop");

	</script>

	</body>

</html>

 

2. The do…while Loop

The do…while loop is similar to the while loop with the exception that the conditional statement is checked at the end of the loop. Therefore, the body of the loop will always be executed at least once.

An equivalent do…while loop for the while loop example is given below. But only the <script></script> section is presented here.

<script type = "text/javascript">
	var counter = 0;
	document.write("Begining of do...while loop" + "<br />");
	do{
		document.write("Current counter: " + counter + "<br />");
		counter ++;
	} while(counter < 10) 
	
	document.write("End of do...while loop");

</script>

 

3. For Loop

The for loop is used to execute a statement a given number of times. The flowchart for the for loop is given below:

For Loop

For Loop Flowchart

 

The for loop statement contains three parts, namely:

  • initialization where we initialize our counter variable to a starting value. The initialization statement must always be  executed before the loop begins.
  • test statement that will test if a given condition evaluates to true or not. If the condition is true, then the body of the the loop will be executed, otherwise the control will exit from the loop to the statements following the loop.
  • iteration statement where you can adjust the value your counter.

 

Example of For loop

The code below is an example of For Loop that uses a loop to print number from 0 to 9

<html>
	<head>
	<title>Loop demo</title>
	</head>

	<body>

	<script type = "text/javascript">
		var count;
		document.write("Begining of loop" + "<br />");
		
		for(count = 0; count < 10; count++) {
			document.write("Current count: " + count);
			document.write("<br />");
		}
		document.write("End of loop");

	</script>

	</body>

</html>

Test this code yourself to see the output.

 

4. For…In Loop

The for…in loop is used to loop through a collection of items.  For example, you can use it to loop through an object’s properties. The syntax for the for…in loop is given below:

for (variable in object) {
   statement or to execute
}

In each iteration of the for…in loop, a property from object is assigned to to variable. The loop continues until all the properties of the object is completed.

The example below is used to print all the properties of the browser’s navigator object.

<html>
    <head>
    <title>For...in Loop Demo</title>
    </head>
   <body>      
      <script type = "text/javascript">
         <!--
            var nProperty;
            document.write("Navigator Object Properties<br /> ");        
            for (nProperty in navigator) {
               document.write(nProperty);
               document.write("<br />");
            }
            document.write ("End of Loop!");
         //-->
      </script>      
      <p>Set the variable to different object and then try...</p>
   </body>
</html>

If you execute the code above, you will have a list of items displayed on the web page. Some of them are shown below:

Navigator Object Properties
vendorSub
productSub
vendor
maxTouchPoints
hardwareConcurrency
cookieEnabled
appCodeName
appName
appVersion
platform
product
userAgent
language
languages
...
...

 

In the next sections, we would now discuss Loop Control Statements

Remember to watch the videos for clarification.