Naming things and invalidating caches

Transform an array of objects into an object in JavaScript

February 28, 2017

Functional programming in JavaScript is something that a lot of programmers take advantage of nowadays - and for a good reason. It makes your code more predictable, testable and overall easier to read.

In this post I’ll describe how one can transform an array of objects to an object indexed by one of the objects’ properties.

Take the following array as an example:

const artists = [
  { id: 1, name: "James Arthur" },
  { id: 2, name: "Kodaline" },
  { id: 3, name: "Bastille" },
]

and we want to transform it to something like this:

{
  1: { id: 1, name: 'James Arthur' },
  2: { id: 2, name: 'Kodaline' },
  3: { id: 3, name: 'Bastille' }
}

Instead of creating a temporary object and iterate through the array attaching each element to it:

function arrToObj(arr) {
  const obj = {}

  artists.forEach(artist => (obj[artist.id] = artist))

  return obj
}

You can instead take advantage of the reduce function to achieve the same thing:

function arrToObj(arr) {
  return artists.reduce((artists, artist) => {
    artists[artist.id] = artist

    return artists
  }, {})
}

This solution is easily understandable and you can chain it at the end of other functional utilities - map, filter, etc.

Happy coding!


Written by Hugo Mendes who lives and works in Portugal writting React components.

© 2020