Most Emailed Articles

Learn Javascript

The FOR Loop

Join the Discussion

More of this Tutorial

Related Terms

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:

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: