For...of? Or for...in? Which to choose!

Michael Bowlin — Sat, 14 May 2022 23:06:53 +0000

Need to iterate through some properties, but not sure which statement to choose? I got you.

According to our handy-dandy MDN, "the for...of statement creates a loop iterating over iterable objects." Iterable objects are those that have a default behavior when iterating such as Array or Map.
The for...in statement iterates over all enumerable properties of an object that are keyed by strings." Enumerable properties are properties that are set to true by default. So no symbol properties will work with this loop! Because it iterates over all of the properties, it may be helpful to use for...in when debugging.

Take a look at the examples below.

for...of:

const superHeroes = ["Super Man", "Batman", "Hawkgirl", "Wonder Woman"]

for(const superHero of superHeroes) {
  console.log(superHero)
}
// expected output: Super Man
// expected output: Batman
// expected output: Hawkgirl
// expected output: Wonder Woman

In this example above, superHeroes is our array of objects. for...of returns the values. In this case, they are Super Man, Batman, Hawkgirl, and Wonder Woman while the keys are the indexes of each — 0, 1, 2, 3. If you're unsure which index belongs to which property, you can always use indexOf method or simply change the for...of to a for...in loop to see the keys.

for...in:

const heroIdentities = {
  "Clark Kent": "Super Man",
  "Bruce Wayne": "Batman",
  "Shayera Hol": "Hawkgirl",
  "Diana": "Wonder Woman"
}
for(const identity in heroIdentities) {
  console.log(`${identity} is: ${heroIdentities[identity]}`)
}
// expected output: Clark Kent is: Super Man
// expected output: Bruce Wayne is: Batman
// expected output: Shayera Hol is: Hawkgirl
// expected output: Diana is: Wonder Woman

In the for...in example, you have an object, heroIndentities, which has key/value pairs in it. The keys are the names of the superheroes: Bruce Wayne, Clark Kent, etc. The values are their aliases: Super Man, Batman, etc. for...in iterates and returns the keys. The reason my examples output returns both the key and the value is because I used bracket notation —heroIdentities[identity]— to access the objects properties.

Rule of thumb: for...of is typically used for arrays or array-like objects and for...in is typically used for objects.

DEV Community: Michael Bowlin

For...of? Or for...in? Which to choose!

for...of:

for...in: