About the for Loop

The for loop structure is commonly used for iterating a line or block of statements based on a incrementing or decrementing counter.

The for statement flow illustrated.

Flow chart of a for loop without break or continue statements.

The for statement has three optional statements, initialization, condition and final-expression that are enclosed in parenthesis ( … ) , separated by semicolons ;. Then a block of code enclosed in curly brackets ( … } follows …

for ([initialization]; [condition]; [final-expression]){
	// Your clever code
	•
	•
	•
	// Last statement in loop
}

About single statement for loops.

Also a single statement not enclosed in curly brackets can follow the for statement  …

for ([initialization]; [condition]; [final-expression])
	console.log('in loop');// Your clever single statement.
console.log('not in loop');// First statement following for loop

One statement for loops can use curly brackets ( … } …

for ([initialization]; [condition]; [final-expression]){
	console.log('in loop');// Your clever single statement.
}
console.log('not in loop');// First statement following for loop

Using curly brackets ( … } for one statement for loops can avoid the problem of adding a second line of code but overlooking the need for the curly brackets.

Digging into the for statement's syntax.

Initialization Statement

for ([initialization]; [condition]; [final-expression])

The optional initialization statement is typically used to initialize a counter variable.

for (var i = 1; [condition]; [final-expression]){
	// Your clever code
	•
	•
	•
	// Last statement in loop
}

This initialization statement declares the variables i and assigns it the value of 1. The variable i does not need to be declared as part of the initialization statement but it is common to do so and that limits its scope to the for statement's code.

Condition Statement

for ([initialization]; [condition]; [final-expression])

The optional condition is an expression evaluated at the beginning of each loop iteration. It typically tests the initialization variable against an upper or lower limit. If evaluated to true, then the statements in the loop are processed. If evaluated to false then the loop is skipped. If omitted, the condition defaults to true and the loop repeats infinitely unless a break statement is used.

for (var i = 1; i <= 10; [final-expression]){
	// Your clever code
	•
	•
	•
	// Last statement in loop
}

This condition statement is evaluated when the the line is first encountered and after the last statement is processed. Either the statements that the for loop is iteration or the final-expression change this expression's variables.

Final Expression Statement

for ([initialization]; [condition]; [final-expression])

The optional final-expression is processed at after the last statement in the for loop body and before the condition expression. Typically it updates the condition variable used in condition.

for (var i = 1; i <= 10; i++){
	// Your clever code
	•
	•
	•
	// Last statement in loop
}

The final-expression can be any expression you like. The auto increment ++ operators used in this example is common for counting from the initialization variable's value to an upper range.

When initialization, condition or final-expression are omitted.

Although optional, the initialization, condition and final-expression statements are commonly included and is the best way to first learn to use the for loop.

Omitting any of the three may require handling their purpose elsewhere in the code. This might in code before for loop for initialization or by statements the for loop is iterating to determine when to exit.

Omitting any of the three are for more specialized uses of the for loop.

Using the initialization statement's variable.

The initialization statement's variable is often used inside the for loop.

This example shows the initialization statement's variable used to produce the multiplcation table for 2 from 1 to 10.

for (var i = 1; i <= 10; i++){
	console.log(i + ' * 2 = ', i * 2);
}

…outputs…

1 * 2 =  2
2 * 2 =  4
3 * 2 =  6
4 * 2 =  8
5 * 2 =  10
6 * 2 =  12
7 * 2 =  14
8 * 2 =  16
9 * 2 =  18
10 * 2 =  20

This example shows the initialization statement's variable used for an indexed array.

var seasons = ['winter', 'spring', 'summer', 'fall'];
for (var i = 0; i <= seasons.length - 1; i++){
	console.log(seasons[i]);
}

…outputs…

winter
spring
summer
fall

The seasons array's length property is used for the for loop's expression. The for loop's initialization statement's i variable was set to zero because the first index in an array is zero.

Complete and Continue