How to Merge Child Object Value to Parent Key Based on Key Name in JavaScript ?

JavaScript allows us to merge values from child objects into their parent object based on a specific key name. This can be useful for organizing data or simplifying complex structures. There are several approaches available in JavaScript to merge child object values to parent key based on the key name which are as follows.

Using for...in loop

In this method, the loop iterates through the properties of an object using a for...in loop, which helps you to access both the keys and their corresponding values. The loop checks whether each key from the child object exists in the parent object It selectively merges only those properties from the child object that are present in the parent object.

Syntax:

for (let key in childObject) {
    if (parentObject.hasOwnProperty(key)) {
        parentObject[key] = childObject[key];
    }
}

Example 1: This example demonstrates how to merge child object values into parent keys using a for...in loop.

let parentObj = {
  name: "John",
  details: {
    age: 30,
    city: "New York",
  },
};

for (let key in parentObj.details) {
  parentObj[key] = parentObj.details[key];
}

delete parentObj.details;
console.log(parentObj);

{ name: 'John', age: 30, city: 'New York' }

Using Object Methods

This approach utilizes built-in JavaScript object methods such as Object.keys() and Array.prototype.forEach() to make the merging process in a functional style. The forEach() method iterates over the array of keys extracted from the child object, allow us for clear and readable code.

Syntax:

const keys = Object.keys(childObject);
keys.forEach(key => {
    if (parentObject.hasOwnProperty(key)) {
        parentObject[key] = childObject[key];
    }
});

Example 2: This example showcases how to merge child object values into parent keys using Object methods.

let parentObj = {
    name: "John",
    details: {
        age: 30,
        city: "New York",
    },
};

Object.keys(parentObj.details).forEach((key) => {
    parentObj[key] = parentObj.details[key];
});
delete parentObj.details;
console.log(parentObj);

{ name: 'John', age: 30, city: 'New York' }

Using ES6 Spread Operator

The spread Operator creates a new object instead of modifying it, helps us achieve immutablity which is benificial when we want to preserve original object. The ES6 spread operator (...) offers a concise and simple syntax for merging objects or object properties.

Syntax:

const mergedObject = { ...parentObject, ...childObject };

Example: This example illustrates how to merge child object values into parent keys using the ES6 spread operator.

const parentObject = {
    name: "John",
    age: 30,
};

const childObject = {
    age: 25,
    city: "New York",
};

const mergedObject = { ...parentObject, ...childObject };

console.log(mergedObject);

{ name: 'John', age: 25, city: 'New York' }

Using Object.assign() Method

To merge values from a child object into a parent object based on a specific key name in JavaScript, you can utilize the Object.assign() method. This method copies the values of all enumerable own properties from one or more source objects to a target object and returns the target object.

Syntax:

Object.assign(target, ...sources)

Example:

// Parent object
let parentObj = {
    name: "Balmukund",
    age: 25,
};

// Child object
let childObj = {
    age: 22,
    city: "Surat",
};

// Merge values from childObj into parentObj based on the key "age"
Object.assign(parentObj, { age: childObj.age });

console.log(parentObj);

{ name: 'Balmukund', age: 22 }

Using Object.entries() with Array.prototype.reduce()

In this approach, the Object.entries() method is used to convert the child object into an array of key-value pairs. Then, Array.prototype.reduce() is utilized to iterate over these pairs and merge the child object values into the parent object. This method offers a functional approach and is useful when you want to handle more complex merging logic.

Syntax:

const mergedObject = Object.entries(childObject).reduce((acc, [key, value]) => {
    if (key in acc) {
        acc[key] = value;
    }
    return acc;
}, parentObject);

Example: The following example demonstrates how to merge the child object values into the parent object using Object.entries() and reduce().

// Parent object
let parentObj = {
    name: "Nikunj",
    details: {
        age: 22,
        city: "Surat",
    },
};

// Merge child object values into parent object
Object.entries(parentObj.details).forEach(([key, value]) => {
    parentObj[key] = value;
});

// Remove the 'details' key
delete parentObj.details;

console.log(parentObj);

{ name: 'Nikunj', age: 22, city: 'Surat' }