Convert object array to hash map, indexed by an attribute value of the Object

One method, many ways

With ES6 functions for brevity

Make your code more... mapnificent! 🗺️ Use Object.fromEntries() and map():

const arrToMap = Object.fromEntries(arr.map(obj => [obj.id, obj]));


Leveraging Maps, not just objects

In a world where order matters and a Map is an actual Map:

const toEs6Map = new Map(arr.map(item => [item.id, item]));


Dynamic keys for adaptability

The cop of code. Providing keys on demand:

const toDynamicKeyMap = (arr, keyFn) => arr.reduce(
  (accumulator, item) => ({...accumulator, [keyFn(item)]: item}), 
  {}
);
const dynamicMap = toDynamicKeyMap(arr, item => item.id);


Extending Array prototype for reusability

Genetically modified Arrays. Now with built-in maps:

Array.prototype.toHashMap = function (keyField) {
  return this.reduce((accumulator, item) => ({...accumulator, [item[keyField]]: item}), {});
};
const arrMap = arr.toHashMap('id');


Leveraging lodash library for simplicity

Climbing mountains of code with the lodash keyBy:

const _ = require('lodash');
const lodashMap = _.keyBy(arr, 'id');


Performance considerations for larger datasets

For mountain-size datasets, beware of the spread operator else you might fall into a performance cliff.

Browser compatibility checks

Your target environment might not be the home of progressive enhancement. Remember to do compatibility checks.

The wisdom of the map

TypeScript types for structure

For TypeScript users, always define types. Your future self will thank you for the clarity:

type Book = { id: number; title: string };
type BookMap = { [key: number]: Book };
const toHashMap = (arr: Book[], key0: keyof Book): BookMap => {/* same logic */};


Avoid mutability using Object.assign

The spread operator is powerful but mutable. Keep things const with Object.assign:

const useNewUrlParser = items.reduce((accumulator, item) => Object.assign(accumulator, {[item.id]: item}), {});


The good, the bad, and the Map

Maps vs objects. A classic showdown:

- **Map**: Keeps insertion order, easy iteration
- **Object**: Better with JSON, also a crowd favorite