Enumerating objects

Unfortunately, objects cannot be used with map, filter, etc.

Fortunately, JavaScript gives us a way. We can, for an object, get an array of the keys of the object. We can use this array to map and filter.

For instance, suppose we were given the following object:

const myHobbies = {
  pandas: {
    title: 'Panda Bears',
    description:
      'Pandas are bears native to south-central China, and are objectively the cutest animals on earth.',
  },
  miniatures: {
    title: 'Miniature Painting',
    description:
      "I enjoy painting miniatures from board games. I've been painting since early 2018, here's some of my work.",
  },
}

And we need to turn this into an array containing the name of the key followed by the title. Given the object above, we would want something like ['pandas - Panda Bears', 'miniatures - Miniature Painting'].

We can't do myHobbies.map, but we can do this:

const keys = Object.keys(myHobbies) // ['pandas', 'miniatures']

And now we can use that to map.

const keys = Object.keys(myHobbies) // ['pandas', 'miniatures']
const answer = keys.map(key => {
  const hobby = myHobbies[key]
  return `${key} - ${hobby.title}`
})

There is another way to work with objects, and that is Object.entries -- entries give us back an array of arrays. The first element of each array is the key, and the second is the value. This allows us to avoid the value lookup.

const entries = Object.entries(myHobbies) // [['pandas', { title: ...., description: ...}], ['miniatures', { title: ..., description: ...}]
const answer = entries.map(entry => {
  return `${entry[0]} - ${entry[1].title}`
})

Using destructuring we can avoid the entry[0] and entry[1] code and give our variables better names:

const entries = Object.entries(myHobbies) // [['pandas', { title: ...., description: ...}], ['miniatures', { title: ..., description: ...}]
const answer = entries.map(([key, value]) => {
  return `${key} - ${value.title}`
})

And we can reduce the code a bit further:

const answer = Object.entries(myHobbies).map(
  ([key, value]) => `${key} - ${value.title}`
)