- Published on
Map an Object in JavaScript
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.