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

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.

Comments

[Lorraine Lee]

for...in iterates over keys, while for...of iterates over values. For "array-like objects," the keys are the cardinal numbers starting from 0. In Javascript, arrays are a special case of objects, and not particularly special:

> a = [1, 2, 3]
[ 1, 2, 3 ]
> typeof a
'object'
> a.foo = 'goo'
'goo'
> Object.keys(a)
[ '0', '1', '2', 'foo' ]
> Object.values(a)
[ 1, 2, 3, 'goo' ]
> typeof a
'object'

That the keys are implied rather than displayed when cardinal is a syntactic shortcut. You might want your mental image of objects (including array-like objects) to be in the {} notation rather than the [] notation, especially if you're going to be a heavy user of for loops. That is, try thinking of a (the value it has just after the first line above) as {0: 1, 1: 2, 2: 3}.

[Ryan Els]

I normally remember to use for...in for objects by saying to myself: 'You put an Object In a box'.
And for for...of I say: 'You have an Array Of objects.'