JavaScript for Loop (for in, for of)

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


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


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

For versus while.

Few things in the world are as important as micro-benchmarks. Here we test a for-loop over an array versus a while-loop over an array.

Program 1: We sum the elements in a short integer array in a for-loop. The V8 compiler can eliminate bounds checks in this loop.

Program 2: A while-loop is used to iterate over the array. This version may be harder to optimize for a compiler.

Result: The first program performs slightly better. The simpler for-loop is a faster way to iterate over an array.

JavaScript program that benchmarks for, array var x1 =; var sum = 0; var items = [10, 20, 30]; for (var i = 0; i < 1000000; i++) { for (var x = 0; x < items.length; x++) { sum += items[x]; } } var x2 =; document.title = (x2 - x1) + "/" + sum; JavaScript program that benchmarks while, array var x1 =; var sum = 0; var items = [10, 20, 30]; for (var i = 0; i < 1000000; i++) { var x = 0; while (x < items.length) { sum += items[x]; x++; } } var x2 =; document.title = (x2 - x1) + "/" + sum; Output 2299 ms for, array [0] 2339 ms [1] 2331 ms [2] 2397 ms while, array [0] 2356 ms [1] 2382 ms [2]

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-2019 Sam Allen. All rights reserved. Written by Sam Allen,