How to Merge Two JavaScript Objects

Web developers commonly use JavaScript object literals to store data as key-value pairs. JS objects can be easily converted into JSON and sent to web servers, and vice versa. Sometimes, you may need to combine the data present in two or more objects. There are several ways to do this using JavaScript. You can do this using plain JavaScript, or using third party JavaScript libraries. In this article, we will learn several different ways to merge JavaScript objects.

How to Merge Two JavaScript Objects

Here are some of the most popular ways to merge two JavaScript objects. Let us say you have the following JavaScript objects.

d1 = {'a':1,'b':2};
d2 = {'b':3,'d':4};

1. Using Spread Operator

The spread operator ‘…’ is a simple and effective way to merge two or more JavaScript objects. Here is its syntax.

{...object1, ...object2}

Basically, you need to prefix each object that you want to merge with ‘…’ and mention it in curly braces ‘{}’, one after the other in a comma-separated manner.

Please note, the merging of objects happens from left to right. So if there are common keys in the objects, then its value in the rightmost objects will be used in the final merged object.

d3={...d1,...d2};
console.log(d3); // output is { a: 1, b: 3, d: 4 }

You can choose to create a separate merged object as shown above, or merge one object into another.

d1={...d1,...d2};
console.log(d1); // output is { a: 1, b: 3, d: 4 }

2. Using Object.assign() method

You can also use Object.assign() function to combine two or more JS objects. Here is its syntax.

Object.assign(object1, object2)

Here is an example to merge two objects using Object.assign().

d3=Object.assign(d1,d2);
console.log(d3); // output is { a: 1, b: 3, d: 4 }

Assign() function also merges objects from left to right. So if there are common keys in the individual objects, it will use the value of rightmost object ,in the final merged object.

Like spread operator, you can also use assign() function to create a new object, or overwrite one of the original objects.

d1={...d1,...d2};
console.log(d1);  // { a: 1, b: 3, d: 4 }

Object.assign() function is more compatible with older web browsers, than using Spread operator.

3. Using jQuery extend()

You can also use third-party libraries like jQuery to merge JavaScript objects. It provides several functions for this purpose such as extend().

$.extend(object1, object2);

Here is an example to merge two objects using this function.

$.extend(d1,d2);
console.log(d1); // output is { a: 1, b: 3, d: 4 }
console.log(d2); // output is { b: 3, d: 4 }

Please note, the extend() function, when used as shown above will also modify the original object d1. This is because it merges d2 into d1 and stores the result into d1.

Even if you store the result explicitly in another object, it will still modify one of the original objects.

d3=$.extend(d1,d2);
console.log(d3);  // output is { a: 1, b: 3, d: 4 }
console.log(d1); // output is { a: 1, b: 2 }
console.log(d2); // output is { b: 3, d: 4 }

So if you do not want the original objects to be modified, then you need to modify the above function as shown below. You need to provide an extra empty object {} as the first argument.

$.extend({},object1, object2);

Here is how you can merge two objects using extend() function.

d3=$.extend({},d1,d2);
console.log(d3); // output is {a: 1, b: 3, d: 4}
console.log(d1); // output is {a: 1, b: 2}
console.log(d2); // output is {b: 3, d: 4}

Key Considerations

Here are some factors to consider when you choose an approach to merge objects.

1. Shallow Copying

All the above solutions only do a shallow copy of objects while merging them. It means that if your objects contain nested data then the data in merged object will continue to point to the data in original objects. However, if your objects are flat with numerical or alphabetical data, then you can use any of these methods, as it will create a separate copy of each data.

2. Data Overwriting

If your objects contain common keys, then their values will be overwritten with the value in rightmost object. So the data in final result depends on the order in which you list your objects in these functions.

3. Enumerable Properties

These functions will only merge enumerable properties in objects. They will omit non-enumerable properties. So if your objects contain non-enumerable properties, you need to write a custom function to merge them.

4. Performance

Although it looks very easy to merge two or more JS object literals, it is important to remember that if your objects contain a lot of data, then it will take some time to merge them.

Conclusion

In this article, we have learnt several simple ways to easily merge two or more JavaScript objects. If you are using modern web browsers, you can use Spread operator since it is concise and easy to understand. If you need to compatibility with older web browsers, use Object.assist() function. If your website uses jQuery library, you can also use extend() function for this purpose.

Also read:

How to Check If Key Exists in JS Object
How to Insert Item Into JS Array
What Does Strict Do in JavaScript