1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/bltut17.htm

was emailed to:

Thanks for sharing About.com with others!

Learn Javascript

The FOR Loop

Join the Discussion

Questions? Comments?

More of this Tutorial

The WHILE Loop Quiz Yourself

Related Terms

Array

Introduction

So far we have looked at statements that are run in sequence or where a selection is made as to which of several statements is to be run. In each of these examples each statement is run once or not at all. Scripts like this run very quickly since it doesn't take long to run a small number of statements.

Scripts like this are also very limiting because in many instances you have some code that you need to run a number of times (for example to process all of the entries in an array). Placing the code into a function and then calling the function as many times as required is one solution that you could use if the code needed to be run twice or even ten times but what about if it needed to be run ten thousand times. A better means of repeating the same code multiple times is needed.

There are in fact several ways of creating repeating code in most languages and Javascript is no exception. We'll start with the simplest looping command that is usually used to repeat a series of statements a specified number of times. This is the for statement or for loop.

Our First Loop

Let's begin by looking at a simple for statement:

for (var i=0; i<10; i++) {
document.write(i);
}

The above example executes the content of the loop ten times, once each with "i" set to the values 0 through 9 and hence writes out "0123456789". The three statements within the parentheses determine the start value, termination condition, and increment value respectively.

While the three statements usually consist of one creating a variable, one testing it, and one incrementing it, the first and third statements can be whatever you like and the second can be any sort of termination condition to test for. This can lead to the for statement being used for all sorts of things other than straightforward looping. You can even omit one or more of the three statements if you don't need them so long as you include the two semi-colons. Such processing is rather advanced and is way beyond a beginners tutorial such as this one. I only mention it here so that if you are looking at someone else's code and see a for statement coded differently from the one above that you are aware of what you are looking at.

The above loop is functionally equivalent to the loop in this next example except that instead of specifying the three statements between the parentheses where you would normally see them, they have been moved to the spots in the code where they are actually performed. I do not suggest that you code your for loops like this. I have only done this one this way to show you how the three statements that you include in your for statement are interpreted. Most, if not all of the for statements that you ever code will have the three statements coded between the parentheses as shown above and in most cases the only difference from this example will be the number that you test for to terminate the loop.

var i=0;
for (;;) {
if (i >= 10) break;
document.write(i);
i++;
}

Using What You Know

We can now place a whole series of entries in an array and process them one after the other all in one go rather than requiring separate statements to process each. For Example:

var i = 0;
var names = new Array();
names[i++] = 'John Smith';
names[i++] = 'Harry Jones';
names[i++] = 'Sarah Brown';
document.write('People on the list<br />');
for (var j = 0; j < names.length; j++) {
document.write(names[j]+'<br />');
}

If you want more names then you only have to add extra entries into the array and the loop will automatically handle them all.

Another use for loops like this is to perform mathematical calculations that require repetition. For example the factorial of a number is defined as the number multiplied by all of the numbers smaller than itself so factorial 4 is 4 x 3 x 2 x 1. We can set up a for loop to calculate this for any number by reducing the loop counter each time around like this:

var i = 50;
for (var j = i-1; j > 1; j--) {
i *= j;
}
document.write('Answer: '+i);

Just substitute whatever number you like (within reason) for the value first assigned to i and see what its factorial is.

Past Lessons

  1. Introduction
  2. Decision Making
  3. Functions
  4. Maintain and Test
  5. External Script and Noscript
  6. Object Oriented Javascript

©2014 About.com. All rights reserved.