Explaining Javascript For Loops

JavaScript For Loops

The for loop is the most common loop used in JavaScript. It is used to loop through a set of instructions a specified number of times.

Syntax

The for loop follows the following syntax:

for ( [initialization]; [condition]; [increment]) {
     statement;
}

The initialization expression is used to establish one or more initial conditions. This will almost always be a single variable along with an assigned value. This variable can be declared in the expression or be an already declared variable.

The condition expression is used to determine if the loop should continue. Before each iteration of the loop, the condition is evaluated. If it is true, then the statement block is executed. If it is false, the loop terminates.

The increment expression runs immediately after each iteration of the statement block. It will almost always be used to update the value of the counter (the variable assigned an initial value in the initialization expression).

The statement is a block of code that is executed until the condition expression returns false.

Common Usage

The most common use of a for loop is to declare a single counter variable, test whether that variable is larger or smaller than another integer, then execute a statement, increasing or decreasing the counter with each iteration. In the example below, all the integers from 1 and 100 are added together using a for loop and stored in the variable ‘sum’:

var sum = 0;

for ( var i = 0; i < 100; i++ ) {
     sum += i + 1;
}

It is common practice to initialize the counter at 0, but it can just as easily be set to 1:

var sum = 0;

for ( var i = 1; i <= 100; i++ ) {
     sum += i;
}

Other Examples

All of the parameters of the for loop are optional. This means that you can leave out any of the three expressions and the for loop will still work. In the example below, the counter variable is set to 0 prior to the creation of the loop, so the initialization expression is left out completely:

var sum = 0;
var i = 0;

for ( ; i < 100; i++ ) {
     sum += i + 1;
}

It is important to notice that the semicolon is left as a kind of place holder for the missing expression. We can even separate out the expressions of the for loop to the point that it includes no parameters:

var sum = 0;
var i = 0;

for ( ; ; ) {
    if ( i >= 100 ) break;
    sum += i + 1;
    i++;
}

Notice that in the above example, each of the expressions of the for loop are included in other ways. Combining the if statement with 'break' accomplishes the same thing as the conditional expression. The incrementation is added to the end of the statement block.

If either of these things were left out, the loop would continue forever. For this reason, you almost always want to include these expressions as parameters in the loop as shown in the Common Usage section above. Still, it is good to keep in mind that JavaScript is a flexible and tolerant language that allows you to accomplish tasks in multiple ways.

Posted by Will on July 9, 2015

Leave a Reply

Your email address will not be published. Required fields are marked *