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)