for...of loop — JS: Arrays

for refers to low-level loops. It requires a counter, rules for how and when the counter changes, and a stopping condition. It would be much more convenient to traverse items in a collection directly, without using a counter. Many programming languages solve this by introducing a special kind of loop. JavaScript also has one: for...of.

const userNames = ['john', 'nancy', 'eugen'];

// the name on each iteration is its own (local) name, so const is used
for (const name of userNames) {
  console.log(name);
}
// => 'john'
// => 'nancy'
// => 'eugen'

As you can see from the example, code that uses a for...of loop is much cleaner than code that uses a for loop. for...of knows how to loop through the elements and knows when they will end.

This loop is great for aggregation tasks:

const calculateSum = (coll) => {
  let sum = 0;
  for (const value of coll) {
    sum += value;
  }

  return sum;
};

for...of is more than just a loop for arrays. To fully understand how it works, you need to understand topics we haven't covered yet, including objects, packing/unpacking, and iterators. In simple terms, different data in JavaScript can pretend to be collections of elements. The simplest example is a string: for...of loops through the string character by character.

const greeting = 'Hello';
for (const symbol of greeting) {
  console.log(symbol);
}
// => "H"
// => "e"
// => "l"
// => "l"
// => "o"

However, a string should not be confused with an array. While accessing string elements by index may be similar from the outside, a string is not an array.

Usage

In most tasks that use a loop, for...of is preferable. Sometimes, however, this is not enough, and manual override is required. In such cases, you can go back to using for. For example, when you don't want to go through every element of an array, but every other one:

for (let i = 0; i < items.length; i += 2) {
  // some code
}

Occasionally, you need to traverse an array in reverse order. for...of of is no use here, and you need for again:

for (let i = items.length - 1; i >= 0; i -= 1) {
  // some code
}

Other tasks aren't really related to arrays at all. The latter include situations where you need to go through numbers in a certain range. In this case, there is no array you can go through using for...of.

for (let i = 5; i < 10; i += 1) {
  // some code
}

Finally, there are situations where you need to change the original array during the traversal:

for (let i = 0; i < items.length; i += 1) {
  items[i] = /* doing something */
}

If look forward at how actual JavaScript code is written, you can see higher-order functions. In other words, in practice, one might say that loops are unnecessary with few exceptions. However, we can't just skip over working with loops because it's an important base. And higher-order functions require an understanding of topics that can't just be learned in one sitting.

Recommended materials

1. Documentation