JavaScript for Loop Examples

Loop over a range of numbers, or elements in an array, with for-loops and while-loops.

For. A million numbers. A billion numbers. We want to loop over them all in order—with a for-loop, we have an efficient and standard looping construct.

With while, another loop, we can do the same thing as for, but the syntax may be simpler when an end point is not known. So while is a good infinite loop.

For example. Consider this program. It uses a for-loop with the standard "i" induction variable. It uses the var keyword—this is an important JavaScript optimization.

Result: The program begins at 0 and stops at 4. When "i" reaches 5, the loop is terminated before being run again.

JavaScript program that uses for-loop // Loop over first 5 numbers and print them. for (var i = 0; i < 5; i++) { console.log("FOR-LOOP ITERATION: " + i); } Output FOR-LOOP ITERATION: 0 FOR-LOOP ITERATION: 1 FOR-LOOP ITERATION: 2 FOR-LOOP ITERATION: 3 FOR-LOOP ITERATION: 4

While. Here we rewrite the first "for" loop into a while-loop. This version of the looping logic is somewhat harder to follow for both people and compilers.

So: We usually prefer "for" when the end point is known. But for an infinite loop or one where we do not know here it stops, while is good.

JavaScript program that uses while-loop // Use while-loop over first five numbers. var i = 0; while (i < 5) { console.log("WHILE INDEX: " + i); i++; } Output WHILE INDEX: 0 WHILE INDEX: 1 WHILE INDEX: 2 WHILE INDEX: 3 WHILE INDEX: 4

For-of loop. This loop enumerates the elements in an array. It does not return indexes like for-in. It returns the actual elements in the array.
JavaScript program that uses for-of loop var numbers = [10, 20, 30]; // Loop over the numbers in the array. for (var number of numbers) { console.log("FOR OF: " + number); } Output FOR OF: 10 FOR OF: 20 FOR OF: 30

For-in loop. This loop returns all the indexes of an array. So in an array of 3 elements, we get the indexes 0, 1 and 2. We can then access the elements themselves.
JavaScript program that uses for-in loop var numbers = [10, 20, 30]; // Loop over the indexes. // ... The "i" identifier is a standard index variable name. for (var i in numbers) { console.log("INDEX: " + i); console.log("ELEMENT: " + numbers[i]); } Output INDEX: 0 ELEMENT: 10 INDEX: 1 ELEMENT: 20 INDEX: 2 ELEMENT: 30

Array iteration, warning. Hoisting variables and caching the length in a for-loop may lead to micro-benchmark improvements. But these can disappear on more complex, real programs.Array

Array iteration, continued. In complex benchmarks I have found that the "for" loop with no cached lengths tends to perform the best. More complex loops are harder to optimize.

A looping review. Most programs are built around looping. Loops construct web pages, they animate graphics, they decide an optimal chess move.
Dot Net Perls
© 2007-2020 Sam Allen. Every person is special and unique. Send bug reports to