snippetjavascriptTip

Map a JavaScript array to an object

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

mapjavascriptobjectarray

Problem

A fairly common task I've written code for time and time again is mapping an array to an object. This might be as simple as mapping an array of primitives to an object via a mapping function or more complex, such as mapping an array of objects to a single object. Luckily, the underlying principles of implementation are fairly similar for both cases.
An array of primitives may be transformed to an object by mapping each element to a key and value. The key is the element itself and the value is the result of applying a mapping function to the element.
To accomplish this, we can use Array.prototype.map() and a mapping function, which is passed the element, index and array and returns the mapped value. The result of the mapping function is then passed to Object.fromEntries(), which creates an object from an array of key-value pairs.
Subsequently, we can extend this snippet to map an array of objects to an object. This is done by mapping each object to a key and value, via a pair of mapping functions. The first mapping function is used to map the key and the second is used to map the value.
> [!NOTE]

Solution

const mapObject = (arr, fn) =>
  Object.fromEntries(arr.map((el, i, arr) => [el, fn(el, i, arr)]));

mapObject([1, 2, 3], a => a * a);
// { 1: 1, 2: 4, 3: 9 }

To accomplish this, we can use Array.prototype.map() and a mapping function, which is passed the element, index and array and returns the mapped value. The result of the mapping function is then passed to Object.fromEntries(), which creates an object from an array of key-value pairs.
Subsequently, we can extend this snippet to map an array of objects to an object. This is done by mapping each object to a key and value, via a pair of mapping functions. The first mapping function is used to map the key and the second is used to map the value.
> [!NOTE]
>
> The order of mapping function arguments is mere preference in this case. Feel free to switch them around, especially if you plan on using the snippet in a functional pipeline.

Code Snippets

const mapObject = (arr, fn) =>
  Object.fromEntries(arr.map((el, i, arr) => [el, fn(el, i, arr)]));

mapObject([1, 2, 3], a => a * a);
// { 1: 1, 2: 4, 3: 9 }

const mapObject = (arr, mapKey, mapValue = i => i) =>
  Object.fromEntries(
    arr.map((el, i, arr) => [mapKey(el, i, arr), mapValue(el, i, arr)])
  );

const people = [ { name: 'John', age: 42 }, { name: 'Adam', age: 39 } ];

mapObject(people, p => p.name.toLowerCase());
// { john: { name: 'John', age: 42 }, adam: { name: 'Adam', age: 39 } }

mapObject(
  people,
  p => p.name.toLowerCase(),
  p => p.age
);
// { john: 42, adam: 39 }

Context

From 30-seconds-of-code: map-array-to-object

Revisions (0)

No revisions yet.