Gregory Dutton's Blog

JavaScript iterations: for...in, for...of and forEach

Gregory Dutton's photo
Gregory Dutton
·

4 min read

As a JavaScript beginner, most people learn the basics of iterating over objects like arrays using while and for loops. Advancing beyond the basics adds some new options including for...in, for...of, and forEach. It may not always be clear which one to use in which situation. This article discusses the pros and cons of using these three other iteration methods, and why you might choose to use one over the other.

Using the 'for...of' loop

The for...of loop is another convenient way to iterate over elements of an object and retrieve the values of each element. It is mostly used to iterate over the elements of an array. Since for...of does not iterate over the properties of an object, it is best used on basic arrays. Here's a quick example:

const Obj = ['Joe', 40, 'July 1, 2000'];

for (const item of Obj) {
  console.log(item);
}

//Expected output
Joe
40
July 1, 2000

for...of will iterate over each of the three elements in the array named Obj allowing each element to be passed to item in the example above. Using console.log shows the value of each item as the loop iterates.

Again, for...of will only get the values of the object, and does not provide the index of the element. In this example attempting to use literal notation on Obj with the index of the element will only return undefined.

const Obj = ['Joe', 40, 'July 1, 2000'];

for (const item of Obj) {
  console.log(Obj[item]);
}

//Expected output
undefined
undefined
undefined

Pros

  • Easy to use in construction. Unlike a for loop, it does not require initialization, condition, or increment statements.

  • It can be used with any type of object including arrays and even enumerable strings.

Cons

  • It does not let you access the index of the current element, only the values.

  • It can not be used to iterate over objects that have key/value pairs such as an object object.

Using the 'for...in' loop

The for...in loop is very similar in structure to the for...of loop, but is used to iterate over the enumerable properties of an object. It iterates over the keys of an object, including inherited properties. While you can use it to iterate over an array, it is mostly recommended to use it with object objects that contain key/value pairs. Here's an example:

const Obj = [{name: 'Joe', age: 40, birthday: 'July 1, 1997' },
            {name: 'Tom', age: 23, birthday: 'July 1, 2023' }];

for (const item in Obj) {
  console.log(item, Obj[item].name, Obj[item].age);
}

//Expected output
0 Joe 40
1 Tom 23

The example above has an array called Obj that has an object with key/value pairs as elements of the array. The console.log statement gives the index of each element and includes access to key/value pairs in the Obj variable.

Pros

  • You can iterate over the keys, which are the properties of an object.

  • Like for...in it is easy to construct.

  • Gives you access to the index number of the element.

Cons

  • Have to use literal and dot notation to access the values of the keys of each element in the object.

Using forEach

forEach is a built-in method in JavaScript that works with arrays. It allows you to execute a callback function on each element in the array. Here's an example:

const Obj = [{name: 'Joe', age: 40, birthday: 'July 1, 1997' },
            {name: 'Tom', age: 23, birthday: 'July 1, 2023' }];

Obj.forEach(item => {
  console.log(item.name, item.age);
});

//Expected Output
Joe 40
Tom 23

In the example above, forEach is called on the Obj array. As the method iterates through each element, the element (item) is passed to console.log. Note that keys from the Obj variable can be called using dot notation. Another thing to note with forEach is that it does not mutate the original array. That's where the callback function comes into play.

Pros

  • Easier to construct than for...in and for...of.

  • Can include a callback function increasing the flexibility of this method.

  • Can access the current element and index.

Cons

  • Can only be used with arrays.

  • Unlike other functions, it does not return a value. It only returns undefined.

  • Can be more complicated to use. Users must understand the construction of callback functions and/or arrow functions.

Summary

Additional choices for object iteration include for...in, for...of, and forEach. Each one has its pros and cons for usage. It is best to use for...of when using arrays and when you don't need to access the index in the array. Using for...of is also easy to construct, and does give you access to the values and the index. It also makes it somewhat easy to access the key/value pairs using literal and dot notation. Finally, with the forEach method, you can include a function call in each iteration making it easier to do manipulation of arrays and construct new or manipulated arrays from the original array.

JavaScriptbasics