How to Merge Objects in JavaScript

Merge objects with the Spread Operator

In 2015, JavaScript ES6 introduced new features. One of them is the spread operator, and it’s an excellent way to merge 2 objects in JavaScript.

Let me give you an example:

const book = {
  name: "You don't know JS",
}

const bookAdditionalInfo = {
  category: 'Programming',
}

const finalBook = { ...book, ...bookAdditionalInfo }

console.log(finalBook)
// Output: {
//  name: "You don't know JS",
//  category: "Programming",
//};

Merge object with the JavaScript Object Assign method

Another way to merge objects is to use the Object.assign() method.

Here another example based on what we did in the previous example:

const book = {
  name: "You don't know JS",
}

const bookAdditionalInfo = {
  category: 'Programming',
}

const finalBook = Object.assign(book, bookAdditionalInfo)

console.log(finalBook)
// Output: {
//  name: "You don't know JS",
//  category: "Programming",
//};

What is interesting with the JS object assign method is that you can merge objects without any limits.

If you look at the documentation, you will see that you can pass many objects as a parameter. All objects’ properties will be merged in the first object.

Let’s try something together:

const book = {
  name: "You don't know JS",
}

const bookAdditionalInfo = {
  category: 'Programming',
}

const shelfAdditionalInfo = {
  shelfNumber: 10,
}

const finalBook = Object.assign(book, bookAdditionalInfo, shelfAdditionalInfo)

console.log(finalBook)
// Output: {
//  name: "You don't know JS",
//  category: "Programming",
//  shelfNumber: 10
//};

Merge two objects with same keys

I want to show you something important to take care of when you merge objects in JavaScript. If your objects have the same keys, you should know that only the last value will remain.

This warning advice is valuable with every type of merge. It’s not proper to the spread operators, the JS object assign method, or anything else.

As an example:

const book = {
  name: "You don't know JS",
}

const bookAdditionalInfo = {
  name: "You don't know JS (final edition)",
  category: 'Programming',
}

const shelfAdditionalInfo = {
  shelfNumber: 10,
}

const finalBook = {
  ...book,
  ...bookAdditionalInfo,
  ...shelfAdditionalInfo,
}

console.log(finalBook)
// Output: {
//  name: "You don't know JS (final edition)",
//  category: "Programming",
//  shelfNumber: 10
//};

In that case, your first object has a variable name and the second object too. When the merge happens, only the last value for name remains.

Merge objects using the Lodash Merge method (deep merge)

If you want to move a bit further with the JavaScript object merge, you can use the Lodash merge method. This method allows you to deep merge objects together. It means the merge is made recursively, and all values of complex objects are copied.

Note: Lodash is available through NPM. If you want to install it on your project, you can follow the Lodash NPM package installation.

To give you a straightforward example, let’s take as an example these objects:

// We import Lodash
// Note: this way isn't the optimized one
// Lodash is a heavy library, and I recommend you to importing
// only the functions of your need
const _ = require('lodash')

const book = {
  name: "You don't know JS",
  author: {
    name: 'Kyle',
    lastName: 'Simpson',
  },
}

const bookAdditionalInfo = {
  name: "You don't know JS (final edition)",
  category: 'Programming',
  author: {
    born: 'United States',
  },
}

const finalBookInvalid = {
  ...book,
  ...bookAdditionalInfo,
}

console.log(finalBookInvalid)
// ❌ Output: {
//  name: "You don't know JS (final edition)",
//  author: { born: 'United States' },
//  category: 'Programming',
//}

const finalBookValid = _.merge(book, bookAdditionalInfo)

console.log(finalBookValid)
// ✅ Output: {
//  name: "You don't know JS (final edition)",
//  author: {
//      born: 'United States',
//      lastName: "Simpson",
//      name: "Kyle",
//  },
//  category: 'Programming',
//}

If you want to know more about the Lodash merge method, you can look at the documentation.

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒