JavaScript Loop

We have seen different variants of while loop. This chapter will explain another popular loop called for loop.

The for Loop

The for loop is the most compact form of looping and includes the following three important parts:

  • The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins.

  • The test statement which will test if the given condition is true or not. If condition is true then code given inside the loop will be executed otherwise loop will come out.

  • The iteration statement where you can increase or decrease your counter.

You can put all the three parts in a single line separated by a semicolon.

Syntax:

for (initialization; test condition; iteration statement){
     Statement(s) to be executed if test condition is true
}

Example:

Following example illustrates a basic for loop:

<script type="text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 10; count++){
  document.write("Current Count : " + count );
  document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>

This will produce following result which is similar to while loop:

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 

While writing a program, there may be a situation when you need to perform some action over and over again. In such situation you would need to write loop statements to reduce the number of lines.

JavaScript supports all the necessary loops to help you on all steps of programming.

The while Loop

The most basic loop in JavaScript is the while loop which would be discussed in this tutorial.

Syntax:

while (expression){
   Statement(s) to be executed if expression is true
}

The purpose of a while loop is to execute a statement or code block repeatedly as long as expression is true. Once expression becomes false, the loop will be exited.

Example:

Following example illustrates a basic while loop:

<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br />");
while (count < 10){
  document.write("Current Count : " + count + "<br />");
  count++;
}
document.write("Loop stopped!");
//-->
</script>

This will produce following result:

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 

There is one more loop supported by JavaScript. It is called for…in loop. This loop is used to loop through an object’s properties.

Because we have not discussed Objects yet, so you may not feel comfortable with this loop. But once you will have understanding on JavaScript objects then you will find this loop very useful.

Syntax:

for (variablename in object){
  statement or block to execute
}

In each iteration one property from object is assigned to variablename and this loop continues till all the properties of the object are exhausted.

Example:

Here is the following example that prints out the properties of a Web browser’s Navigator object:

<script type="text/javascript">
<!--
var aProperty;
document.write("Navigator Object Properties<br /> ");
for (aProperty in navigator)
{
  document.write(aProperty);
  document.write("<br />");
}
document.write("Exiting from the loop!");
//-->
</script>

This will produce following result:

Navigator Object Properties
appCodeName
appName
appMinorVersion
cpuClass
platform
plugins
opsProfile
userProfile
systemLanguage
userLanguage
appVersion
userAgent
onLine
cookieEnabled
mimeTypes
Exiting from the loop! 

Admin has written 171 articles

Leave a Reply