One thing that I have to do rather often when writing JavaScript code is to combine properties from two objects into a single object.

UPDATE: This article was originally called Combining two objects in lodash. I’ve updated it to cover more ways of combining objects in JavaScript

For example, given these two objects:

1
2
3
4
5
6
7
const a = {
name: "John",
age: 23
};
const b = {
job: "Analyst"
};

…what can be done to avoid copying properties manually?

1
2
3
4
5
const c = {
name: a.name,
age: a.age,
job: b.job
};

Solution 1: Object.assign

Object.assign is a built-in method introduced to JavaScript as part of the ES6 standard. It allows you to copy properties from a target object to the source object. A possible solution to the above problem could be:

1
Object.assign(b, a);

This way b would have both its own properties and a‘s properties. However, we might want to avoid modifying b. In such case, we can introduce a new, empty object and copy properties from a and b to it.

1
const c = Object.assign({}, a, b);

Solution 2: lodash

If for some reason you cannot use ES6 language features in your application, you can resort to using the lodash library.

1
const c = _.assign({}, a, b);

If you’d like to learn more about lodash, check out my free e-book about Functional Programming in JavaScript.

Solution 3: object spread operator

Another ES6-based solution and my personal favourite is to use the object spread operator.

1
const c = { ...a, ...b };

The triple-dot operator unwraps an object and lets you put its properties into a new object. By unwrapping both a and b and putting it into a new object ({}) we end up with an object having both a‘s and b‘s properties. So, which way is the best way? It depends on your preference and requirements. Just pick one and be consistent in your choice!