Merge two objects in JavaScript

Merge two objects in JavaScript

by

In this tutorial, we will learn how to merge two or more JavaScript objects and create a new object that combines the properties of all the objects.

To merge objects into a new one containing all the properties of the merged objects, we have two options:

  • Use a spread operator (…)
  • Use the Object.assign() method

Merging Objects using Spread Operator

In ES6 we were introduced to the spread operator (…). The spread operator easily helps in creating a new object with all the existing properties that we had in the first and second object. If there are two properties with the same name, the property from the second object wins (get merged into a new object).

Example Code with unique key names:

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { d: 4, e: 5, f: 6 };
const obj3 = {…obj1, …obj2}; // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }

Example Code with same name:

const user = { name: 'CodingIsEasy', age: 27 };
const changes = { name: 'CodingIsSuperEasy' };
const userNew = { …user, …changes }; // { name: 'CodingIsSuperEasy', age: 27 }

Merging Objects using Object.assign()

The Object.assign() method allows you to copy all enumerable properties from one or more source objects to a target object, and return the new object. If there is a need to merge the second object into the first one, instead of creating a new object out of both, you can consider to use Object.assign(). The Object.assign(target, source) function merges the source (second object) into the target (first object).

Example Code 1:

const target = {a: 1, b: 2, c: 3};
const source = {d: 4, e: 5, f: 6};
Object.assign(target, source);
target; // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

Example Code 2:

let person = {
    firstName: 'Arpit',
    lastName: 'Mittal',
    age: 27,
    ssn: '123-456-7890'
};
 
 
let job = {
    jobTitle: 'React JS Developer',
    country: 'India'
};
 
 
let employee = Object.assign(person, job);
console.log(employee);

Output:

Output:
{
    firstName: 'Arpit',
    lastName: 'Mittal',
    age: 27,
    ssn: '123-456-7890',
    jobTitle: 'React JS Developer',
    country: 'India'
}

The Shallow Merge

The spread operator ( …) and the Object.assign() method perform a shallow merge. If an object has a property referring to another object then the property of the original object and the resultant target object will refer to the same object.

Let’s understand this by an example:

Code:

let person = {
    firstName: 'Arpit',
    lastName: 'Mittal',
    age: 27,
    ssn: '123-456-7890',
    contact: {
        instagram: 'appymittal',
        website: 'arpitmittal.in'
    }
};
 
 
let job = {
    jobTitle: 'React JS Developer',
    location: 'India'
};
 
let employee = { ...person,  ...job };
 
console.log(employee.contact === person.contact);

Output:

true

The Deep Merge

To recursively merge, own and inherit innumerable string keyed properties of source objects to a target object, you can use the Lodash .merge() method: 

.merge(object, [sources])

Hope you have learnt how to merge two objects in JS. Comment below if you have any doubts.

Leave a Comment