JavaScript For Loop

A JavaScript For Loop is a block of code that allows you to repeat a section of script a certain number of times; perhaps changing certain variable values each time the code is executed. JavaScript features two basic loop types:

Each javascript loop type has its own advantages. However, the JavaScript For Loop is the most commonly used  loop in javascript.

The JavaScript For Loop

You use a JavaScript For Loop to create a loop in which the conditions are initialized, evaluated, and changed in a compact form. Here’s an example of  JavaScript For Loop that execute on web browser:

for (var count = 0; count < 10; count++) { 
// JavaScript For Loop Execute code here} 

A JavaScript For Loop has three clauses in parentheses. The first clause sets the initial expression, as shown in the preceding example and also here:

var count = 0; 

The next clause of a JavaScript For Loop specifies the condition expression, represented by the following code from the example of JavaScript For Loop:

count < 10; 

The operation expression is usually used to increment the counter used for the test. In the code example, this expression is the final clause in the parentheses:

count ++; 

Initial Expression in JavaScript For Loop is usually a statement or a variable declaration. It should evaluate to a single value and is typically used to initialize a counter variable. This expression may optionally declare new variables with the var keyword.

Condition is a condition that is evaluated before each successive pass through the JavaScript For Loop. The statement is executed only if the condition evaluates to true.

Operation in JavaScript For Loop is a statement that is executed after each consecutive pass through the For loop’s body. It is typically used to update or increment the counter variable, which counts the number of passes through the For loop. Consider the following JavaScript For loop script fragment:

var number1 = 1
var number2 = 1
for (var counter = 1; counter <= 10; counter++)
{
   document.write(number1 + " ")
   number2 = number2 + number1
   number1 = number2 – number1
}
This piece of For Loop script prints the first ten numbers of the Fibonacci sequence. The Fibonacci sequence includes the following numbers:
1 1 2 3 5 8 13 21 34 55 89 144 . . . (f1 = 1, f2=1, fx = fx–1 + fx–2)

Each number is equal to the sum of the two preceding numbers. The first two numbers are both equal to 1.

Take a look at the script. Number1 and number2 are initialized to 1, because f1 = 1 and f2=1. The for statement prints the numbers in the Fibonacci sequence. The initial expression of the loop is var counter = 1, which declares the loop counter and initializes its value to 1.

The condition counter <= 10 means that the loop executes while the value of counter is less than or equal to 10. Note that the condition is evaluated only at the end of the loop. Incrementing the value of the for loop counter is the action in this example, and is typical of for loops. In short, this for loop’s attributes cause it to execute exactly ten times. The net effect is that it computes and prints the first ten numbers of the Fibonacci sequence.

Understanding the content of the JavaScript For Loop is just plain math. After the current number is printed, number2 is assigned the sum of its two preceding numbers in the sequence. number1 should hold the value of number2 before the assignment statement. The following explains how this is done (number2′ is the value of number2 before the assignment statement):

number1 = number2 – number1 == (number2 + number1) – number1 == number2 

You can create infinite executing for loop with the for statement, makes such loops meaningful by providing a way to terminate their execution. The basic structure of an infinite for loop is: for ( ; ; ) statement

You can also create nested for loop. The following loop prints a rectangle of asterisks (25 x 10):

for (var i = 1; i <= 10; i++) 
  { 
   for (var j = 1; j <= 25; j++) 
    { 
     document.write("*") 
} 
   document.write("<BR>") 
} 

Javascript for in loop

javascript for in loop allows you to for loop over all the names of the properties of an object and execute statements for each property using a variable to hold the name of the property. The general format for a for in loop is shown here:

for (varname in objectname) 
  {  JavaScript For Loop Code Here  } 

Here is the complete web browser Example of javascript for in loop

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"" http://www.w3.org/TR/html4/strict.dtd "><html> 
  <head> 
    <title>JavaScript For in Loop Example</title> 
  </head> 
 <body> 
  <script type="text/javascript"> 
  var star = new Object; 
  star.name = "Polaris"; 
  star.type = "Double/Cepheid"; 
  star.constellation = "Ursa Minor";
  for (var starProp in star) { 
  alert(starProp + " = " + star[starProp]);} 
  </script> 
  </body> 
</html> 

for each in

The for each in loop is very similar to the javascript for in loop, but rather than JavaScript For Looping through the name of each property it allows you to for loop through the value of each of the properties. It is only supported in JavaScript 1.6 and higher.

Here is the complete web browser Example of For Each In Loop

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd "><html> 
  <head> 
   <title>For Each In Loop Example</title> 
  </head> 
<body> 
   <script type="text/javascript"> 
    var star = new Object; 
    star.name = "Polaris"; 
    star.type = "Double/Cepheid"; 
    star.constellation = "Ursa Minor"; 
for each (var starValue in star) { 
alert(starValue + " is in the star object.");} 
</script> 
</body> 
</html>