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:

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.

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.

JavaScript

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.

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 } } }