How to Recursively Map Object in JavaScript ?
Recursively mapping objects in JavaScript involves traversing through nested objects and applying a function to each key-value pair. This process allows for transforming the structure of an object according to a specific logic or requirement.
Below are the approaches to recursively map an object in JavaScript:
Table of Content
- Using a Recursive Function
- Using Object.keys() and Array.reduce()
- Utilizing libraries such as Lodash or Ramda
Using a Recursive Function
This approach involves defining a recursive function that iterates through each key-value pair of the object, checking if the value is another object. If it is, the function recursively calls itself to map the nested object.
Example: The below code uses a recursive function to map an object in JavaScript.
function mapObject(obj, fn) {
return Object.fromEntries(
Object.entries(obj).
map(([key, value]) => {
if (typeof value === 'object' &&
value !== null) {
return [key, mapObject(value, fn)];
}
return [key, fn(value)];
})
);
}
const obj = {
a: 5,
b: {
c: 6,
d: {
e: 7
}
}
};
const mappedObject =
mapObject(obj, value => value * 2);
console.log(mappedObject);
Output
{ a: 10, b: { c: 12, d: { e: 14 } } }
Using Object.keys() and Array.reduce()
This approach utilizes Object.keys() to get an array of keys from the object and Array.reduce() to iterate through each key-value pair. If the value is an object, the function recursively applies the mapping logic.
Example: The below code will explain the use of the above methods to create a recursive function that iteratesthe object.
function mapObject(obj, fn) {
return Object.keys(obj).reduce((acc, key) => {
const value = obj[key];
acc[key] = typeof value === 'object' &&
value !== null ?
mapObject(value, fn) : fn(value);
return acc;
}, {});
}
const obj = {
a: 2,
b: {
c: 4,
d: {
e: 6
}
}
};
const mappedObject =
mapObject(obj, value => value * 2);
console.log(mappedObject);
Output
{ a: 4, b: { c: 8, d: { e: 12 } } }
Utilizing libraries such as Lodash or Ramda
Libraries like Lodash and Ramda provide utility functions to work with objects and collections. These libraries offer functions such as _.mapValues() in Lodash or R.map() in Ramda, which can be used to recursively map objects with ease.
Example: The below code uses the Lodash library to recursively iterate an object in JavaScript.
const _ = require('lodash');
const obj = {
a: 1,
b: {
c: 2,
d: {
e: 3
}
}
};
const fn = value => value * 2;
const mapObject =
(obj, fn) => _.mapValues
(obj, value => typeof value === 'object' &&
value !== null ?
mapObject(value, fn) :
fn(value));
const mappedObject = mapObject(obj, fn);
console.log(mappedObject);
Output:
{ a: 2, b: { c: 4, d: { e: 6 } } }
Contact Us