How to merge objects in JavaScript? [SOLVED]


Written By - Olorunfemi Akinlua

One of the key features of JavaScript is its ability to work with objects, which are a fundamental data type used to store and manipulate information. In many cases, developers need to merge two or more objects together in order to create a single object that combines the properties and values of each individual object. This process is commonly known as object merging and can be achieved using a variety of techniques in JavaScript.

In this article, we will explore three different methods to merge objects in JavaScript: using the Object.assign() method, the spread operator method, and the Object.entries() and Object.fromEntries() method.

 

Using Object.assign() method

The Object.assign() method is a built-in method in JavaScript that allows us to copy the values of all enumerable properties from one or more source objects to a target object. Here is the syntax for the Object.assign() method.

Object.assign(target, ...sources);
  • target: The target object to copy the properties to.
  • sources: One or more source objects to copy the properties from.

Now with the syntax, let’s merge some objects.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const result = Object.assign(target, source);

console.log(result);

Output

{ a: 1, b: 4, c: 5 }

In this example, we have a target object with two properties: a and b, and a source object with two properties: b and c. When we merge these two objects using the Object.assign() method, the value of the b property in the target object is overwritten by the value of the b property in the source object, and a new property c is added to the target object.

Let’s illustrate with another example but here we have a nested object and similar keys.

const target = { a: { b: 1 } };
const source = { a: { c: 2 } };
const result = Object.assign(target, source);

console.log(result);

Output

{ a: { c: 2 } }

In this example, we have a target object with a nested object a with a property b, and a source object with a nested object a with a property c. When we merge these two objects using the Object.assign() method, the entire nested object a in the target object is replaced with the nested object a in the source object.

 

Using the spread operator method

The spread operator is a syntactical feature in JavaScript that allows an iterable (such as an array or a string) to be expanded into individual elements. It is denoted by three consecutive dots (...) and can be used in a variety of contexts, including function calls, array literals, and object literals.

Here we will use it to merge two objects by expanding the objects we merge within a new object. Below is the syntax of how we will use the spread operator to merge objects in JavaScript.

const result = { ...obj1, ...obj2 };

Where obj1 is The first object to merge, and the obj2 is the second object to merge.

To illustrate this, we will combine two simple objects

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 4, c: 5 };
const result = { ...obj1, ...obj2 };

console.log(result);

Output

{ a: 1, b: 4, c: 5 }

In this example, we have two objects obj1 and obj2 with some overlapping properties. When we merge these two objects using the spread operator, the value of the overlapping property b in obj2 overwrites the value of the property b in obj1.

In another example, we will merge two-level objects with similar key values.

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };
const result = { ...obj1, ...obj2 };

console.log(result);

Output

{ a: { c: 2 } }

In this example, we have two objects obj1 and obj2 with nested objects. When we merge these two objects using the spread operator, the entire nested object a in obj1 is replaced with the nested object a in obj2.

 

Using the Object.entries() and Object.fromEntries() method

These methods can be used to merge objects by converting the objects into arrays of key-value pairs, concatenating the arrays, and then converting the concatenated array back into an object.

The Object.entries() method returns an array of a given object's own enumerable property [key, value] pairs. And the Object.fromEntries() method transforms a list of key-value pairs into an object.

For us to merge objects using the Object.entries() and Object.fromEntries() method, this is the syntax

const result = Object.fromEntries(Object.entries(obj1).concat(Object.entries(obj2)));

Where the obj1 is the first object to merge, and the obj2 is the second object to merge.

Now to some examples, we will execute the same code as earlier.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 4, c: 5 };
const result = Object.fromEntries(
    Object.entries(obj1).concat(Object.entries(obj2))
);

console.log(result);

Output

{ a: 1, b: 4, c: 5 }

In this example, we have two objects obj1 and obj2 with some overlapping properties. When we merge these two objects using the Object.entries() and Object.fromEntries() methods, the value of the overlapping property b in obj2 overwrites the value of the property b in obj1.

 

Summary

In JavaScript, you can merge objects using the Object.assign() method or the spread operator (...). The Object.assign() method merges one or more source objects into a target object. The target object will receive the properties of the source objects. If there are any overlapping property names, the property value of the last object in the argument list will overwrite the previous values. To use Object.assign(), you need to provide a target object as the first argument, followed by one or more source objects.

The spread operator is another way to merge objects in JavaScript. You can use the spread operator to spread the properties of multiple objects into a new object. When you use the spread operator, a new object is created that contains all the properties of the source objects. Like Object.assign(), the spread operator overwrites properties with the same name in the order they appear.

Both Object.assign() and the spread operator are useful for combining objects with different properties. When merging objects, it's important to remember that the original objects are not changed. Instead, a new object is created with the merged properties. Merging objects is a common operation in JavaScript, especially when working with complex data structures or manipulating JSON data.

 

References

Object.assign() - JavaScript | MDN (mozilla.org)
Spread syntax (...) - JavaScript | MDN (mozilla.org)
Object.entries() - JavaScript | MDN (mozilla.org)
Object.fromEntries() - JavaScript | MDN (mozilla.org)

 

Olorunfemi Akinlua

He is boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs user-friendly interfaces to enhance digital experiences across various domains. You can connect with him on LinkedIn.

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can send mail to admin@golinuxcloud.com

Thank You for your support!!

Leave a Comment