JavaScript Merge Objects

Summary: in this tutorial, you 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 that has all properties of the merged objects, you have two options:

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

Merge objects using the spread operator (...)

ES6 introduced the spread operator (...) which can be used to merge two or more objects and create a new one that has properties of the merged objects.

The following example uses the spread operator (...) to merge the person and job objects into the employee object:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};


let job = {
    jobTitle: 'JavaScript Developer',
    location: 'USA'
};

let employee = {
    ...person,
    ...job
};

console.log(employee);
Code language: JavaScript (javascript)

Output:

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    location: 'USA'
}
Code language: CSS (css)

If objects have a property with the same name, then the right-most object property overwrites the previous one. For example:

let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};

let location = {
    city: 'London',
    country: 'England'
};

let remoteJob = {
    ...job,
    ...location
};

console.log(remoteJob);
Code language: JavaScript (javascript)

Output:

{
    jobTitle: 'JavaScript Developer',
    country: 'England',
    city: 'London'
}
Code language: CSS (css)

In this example, the job and location has the same property country. When we merged these objects, the result object (remoteJob) has the country property with the value from the second object (location).

Merge objects using Object.assign() method

The Object.assign() method allows you to copy all enumerable own properties from one or more source objects to a target object, and return the target object:

Object.assign(target, sourceObj1, sourceObj2, ...);
Code language: JavaScript (javascript)

Similar to spread operator ( ...), if the source objects have the same property name, the later object will overwrite the previous object. See the following example:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};


let job = {
    jobTitle: 'JavaScript Developer',
    country: 'USA'
};


let employee = Object.assign(person, job);
console.log(employee);
Code language: JavaScript (javascript)

Output:

{
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    jobTitle: 'JavaScript Developer',
    country: 'USA'
}
Code language: CSS (css)

The Shallow Merge

Both the spread operator ( ...) and Object.assign() method perform a shallow merge. It means that if an object has a property that references to another object, the property of the original object and result target object will reference the same object. For example:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356',
    contact: {
        phone: '408-989-8745',
        email: '[email protected]'
    }
};


let job = {
    jobTitle: 'JavaScript Developer',
    location: 'USA'
};

let employee = { ...person,  ...job };

console.log(employee.contact === person.contact);
Code language: JavaScript (javascript)

Output:

true
Code language: JavaScript (javascript)

In this example, the person object has the contact property that references to an object. After merging, the person and employee object have the contact property that reference to the same object.

The Deep Merge

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

_.merge(object, [sources])
Code language: CSS (css)

In this tutorial, you have learned how to merge objects in JavaScript using the spread operator (...) and Object.assign() method.