How to Create a Map Function for Objects in JavaScript

1. Use the General map() Method to Create a Map Function for Objects in JavaScript
2. Use a for in Loop to Create a Map Function for Objects in JavaScript
3. Create a New Object Using a Custom Map Function for Objects in JavaScript
4. Use Object.entries() and Object.fromEntries() to Create a Map Function for Objects in JavaScript
5. Write a Function Using Object.entries() and Object.fromEntries() to Map Your Objects in JavaScript

There are many cases where you want to perform certain operations on objects in JavaScript. The standard library includes all sorts of methods for achieving this, but that doesn’t mean every case is covered.

In this case, there’s no native way to iterate over an object’s attributes and perform an action similar to the Array.prototype.map function.

Thus, if you want to go over each attribute and add a specific value to it, there is no way for you to do that using a standard library method. Thankfully, you can create your map function from scratch and customize it as you see fit.

Use the General map() Method to Create a Map Function for Objects in JavaScript

Using the native map() function, this method can achieve the desired results. However, you should know that this method will modify the original object instead of creating a new one.

If you do not care about the original object and you want the result, here is how you can achieve this:

let testObject = {'first': 1, 'second': 2, 'third': 3};

Object.keys(testObject).map(function(key, value) {
  testObject[key] += 1
});

console.log(testObject);

Output:

{ first: 2, second: 3, third: 4 }

Use a for in Loop to Create a Map Function for Objects in JavaScript

Alternatively, you can also use a simple for loop to iterate over the object’s attributes and perform the desired calculations. This method uses the hasOwnProperty() function to check if the object has valid attributes.

let testObject = {'first': 1, 'second': 2, 'third': 3};

for (var key in testObject) {
  if (testObject.hasOwnProperty(key)) {
    testObject[key] += 1;
  }
}

console.log(testObject);

Output:

{ first: 2, second: 3, third: 4 }

Create a New Object Using a Custom Map Function for Objects in JavaScript

As mentioned above, the previous method overwrites the original object while performing the desired operations. If you do not want to do that, you can instead create a new object and keep the original intact.

Obvisouly, this method requires more code, but the result is a bit cleaner.

let testObject = {'first': 1, 'second': 2, 'third': 3};

function customMap(object, mapFn) {
  return Object.keys(object).reduce(function(result, key) {
    result[key] = mapFn(object[key])
    return result
  }, {});
}

let newObject = customMap(testObject, function(value) {
  return value + 1
});

console.log(testObject);
console.log(newObject);

Output:

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }

The output shows the original object and the newly created object with the modified values. If you are curious, the mapFn parameter we used is part of the Array.from() method, and it is designed to work as a mapping function.

Use Object.entries() and Object.fromEntries() to Create a Map Function for Objects in JavaScript

If your project allows you to use the ES2019 standard without worrying about backward compatibility, you can reduce the code needed to create a mapping function.

Here is how the code for this method looks like:

let testObject = {'first': 1, 'second': 2, 'third': 3};

let newObject = Object.fromEntries(
    Object.entries(testObject).map(([key, value]) => [key, value + 1]));

console.log(testObject);
console.log(newObject);

Output:

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }

Since this is a one-liner, it may prove to be hard to maintain, even though it’s a bit easier to implement.

Write a Function Using Object.entries() and Object.fromEntries() to Map Your Objects in JavaScript

Suppose you want to make the code above more manageable and easier to maintain. In that case, the simplest solution is to integrate the Object.entries() and Object.fromEntries() into a custom function.

As such, here is how you could rewrite the previous bit of code:

let testObject = {'first': 1, 'second': 2, 'third': 3};

function customMap(object, func) {
  return Object.fromEntries(
      Object.entries(object).map(([key, value]) => [key, func(value)]));
}

let newObject = customMap(testObject, (x) => x + 1);

console.log(testObject);
console.log(newObject);

Output:

{ first: 1, second: 2, third: 3 }
{ first: 2, second: 3, third: 4 }