Map an Object in JavaScript

As a JavaScript developer, I am always on the lookout for efficient ways to manipulate data structures. One common task that often arises is mapping an object, where we need to iterate over each key-value pair and perform some transformation or operation. In this blog post, I am excited to dive into the world of mapping objects in JavaScript. We will explore various techniques and approaches to achieve this, allowing you to unleash the full potential of your data manipulation capabilities. So, let’s get started and discover how we can map objects like a pro!

Introduction – Creating a new object by mapping the values of an existing object

Array.prototype.map() is the default method that is available in JavaScript and can be used on top of an array and Object.map() is not available. But, there are a few ways we can achieve a similar functionality for objects, let’s discuss them below.

We will solve this problem in a functional way by creating a function called objectMap(). We will use a function similar to the Array.prototype.map method, but for objects instead of arrays. It can be used to transform the values of an object, or to create a new object based on the values of an existing object.

Method 1 : Using Object.entries() and Object.fromEntries() – ES10/ES2019 standard

This method is using the objectMap function to transform an object. The objectMap function takes in an object and a function to transform the object.

const objectMap = (obj, fn) =>
  Object.fromEntries(Object.entries(obj).map(([k, v], i) => [k, fn(v, k, i)]));

Let’s run the above code and see the output-

const myObject = { a: 1, b: 2, c: 3 };

console.log(objectMap(myObject, (v) => 2 * v));
// { a: 2, b: 4, c: 6 }

In the above example, the objectMap function is being used to double the value of each property in the myObject object, and it does it seamlessly and we can see the output.

For example, we could use this function to convert an object of strings to an object of numbers-

const obj = {
  a: "1",
  b: "2",
  c: "3",
};

const numObj = objectMap(obj, (str) => parseInt(str, 10));

console.log(numObj); // { a: 1, b: 2, c: 3 } -> values are now numbers

Method 2 : Using Object.entries() and Object.assign() – ES7/ES2016 standard

This is an approach where we will use ES7 standard which supports Object.entries() and Object.assign()`.

const objectMap = (obj, fn) =>
  Object.assign({}, ...Object.entries(obj).map(([k, v]) => ({ [k]: fn(v) })));

Let’s run the above code and see the output-

const myObject = { a: 1, b: 2, c: 3 };

console.log(objectMap(myObject, (v) => 2 * v));
// { a: 2, b: 4, c: 6 }

In the above example, the objectMap function is being used to double the value of each property in the myObject object, and it does it seamlessly and we can see the output.

For example, we could use this function to convert an object of strings to an object of numbers-

const obj = {
  a: "1",
  b: "2",
  c: "3",
};

const numObj = objectMap(obj, (str) => parseInt(str, 10));

console.log(numObj); // { a: 1, b: 2, c: 3 } -> values are now numbers

Method 3 : Using Object.entries() and Object.reduce()

let objectMap = (obj, fn) =>
  Object.entries(obj).reduce((p, [k, v]) => ({ ...p, [k]: fn(v) }), {});

Let’s run the above code and see the output-

const myObject = { a: 1, b: 2, c: 3 };

console.log(objectMap(myObject, (v) => 2 * v));
// { a: 2, b: 4, c: 6 }

In the above example, the objectMap function is being used to double the value of each property in the myObject object, and it does it seamlessly and we can see the output.

For example, we could use this function to convert an object of strings to an object of numbers-

const obj = {
  a: "1",
  b: "2",
  c: "3",
};

const numObj = objectMap(obj, (str) => parseInt(str, 10));

console.log(numObj); // { a: 1, b: 2, c: 3 } -> values are now numbers

Method 4 : Using for…of loop – an Imperative approach

let objectMap = (obj, fn) => {
  let newObj = {};
  for (let [k, v] of Object.entries(obj)) {
    newObj[k] = fn(v);
  }
  return newObj;
};

Let’s run the above code and see the output-

const myObject = { a: 1, b: 2, c: 3 };

console.log(objectMap(myObject, (v) => 2 * v));
// { a: 2, b: 4, c: 6 }

In the above example, the objectMap function is being used to double the value of each property in the myObject object, and it does it seamlessly and we can see the output.

For example, we could use this function to convert an object of strings to an object of numbers-

const obj = {
  a: "1",
  b: "2",
  c: "3",
};

const numObj = objectMap(obj, (str) => parseInt(str, 10));

console.log(numObj); // { a: 1, b: 2, c: 3 } -> values are now numbers

These are some of the best ways that you can use to achieve mapping of objects.

And there you have it, we have reached the end of our journey exploring how to map objects in JavaScript. It has been an exciting exploration into the world of data manipulation and transformation. By mastering the art of mapping objects, you now have a powerful tool at your disposal to handle complex data structures with ease and efficiency. Whether you need to transform data, extract specific properties, or perform any custom operation, mapping objects will undoubtedly be a valuable technique in your JavaScript arsenal. So go ahead, apply your newfound knowledge, and unlock the full potential of your data manipulation skills in JavaScript.