Map function for objects (instead of arrays)

Matthew C.

The Problem

You have an object that you want to map over. Suppose you want to map over the following object and double each value:

const myObject = { a: 2, b: 4, c: 6 };

With an array, you can use the map() function to call a function on every element of an array to change the values and return a new array, leaving the original array unchanged. JavaScript does not have a map function for objects. How do you create one?

The Solution

The two solutions described below involve converting an object’s keys or keys and values into an array so that JavaScript array methods can be used to iterate through the values, which allows us to change them. The array is then converted back into an object.

The Object Map Function

You can create an object map function that takes in the object that you want to map over and a map function. In the example code below, the map function that’s passed into the objectMap function as an argument doubles the value of the input:

function mapFn(value) { return value * 2; } function objectMap(obj, fn) { const newObject = {}; Object.keys(obj).forEach((key) => { newObject[key] = fn(obj[key]); }); return newObject; } console.log(objectMap(myObject, mapFn)); // { a: 4, b: 8, c: 12 }

The objectMap function first creates an empty object. An array of the keys of the passed-in object is created using the Object.keys() method. This array is mapped over using the forEach() array method. For each value, which is a key of the obj argument, we create a key-value pair for newObject. We pass the value into the map function argument, fn, to change the values as needed. We then return the newObject that’s created.

The Object.entries() Method

Alternatively, you can use the Object.entries() method to convert the obj argument to a nested array where the first element of each nested array is an object key and the second element of each nested array is an object value. You can then use the array map() function to change the value of each element using the map function argument. The Object.fromEntries() method is then used to convert this array of key-value pairs into an object:

function mapFn(value) { return value * 2; } function objectMap(obj, fn) { return Object.fromEntries( Object.entries(obj).map(([key, value]) => [key, fn(value)]) ); } console.log(objectMap(myObject, mapFn)); // { a: 4, b: 8, c: 12 }

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.111.0/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.