How to Merge Two Objects in JavaScript: 5 Best Methods

Introduction: Why Merging Objects is a Pain for Every JavaScript Developer

Imagine: you're working on an application and need to merge data from two different sources. For example, you have a basic user configuration from the database and settings coming from the frontend. How do you combine them without pain and suffering? This very question — “How can I merge properties of two JavaScript objects?” — has gathered thousands of views on Stack Overflow. And for good reason: merging objects in JavaScript hides many pitfalls.

In this article, we'll cover all popular ways to merge objects in JS: from the classic Object.assign() to the modern spread operator. You'll learn how to deep copy nested structures, avoid mutating source data, and choose the right method for your task. Let's go!

The Problem: What Does “Merge Properties of Two Objects” Mean?

When we say “merge objects JavaScript”, we mean creating a new object that contains all properties from the source objects. If the same keys appear, the value from the second object “overwrites” the value from the first.

Suppose we have two objects:

const user = {  name: 'Anna',  age: 28,  city: 'Moscow'};

const updates = {  age: 29,  job: 'Developer'};

After merging JS objects we want to get:

{  name: 'Anna',  age: 29,       // updated value  city: 'Moscow',  job: 'Developer'  // new property}

Seems simple. But the devil is in the details: nested objects, arrays, mutation of the original, and performance.

Method 1: Object.assign() — The Good Old Classic

The Object.assign() method is the oldest and most proven way to merge objects in JavaScript. It copies own enumerable properties from one or more source objects to a target object.

Syntax

Object.assign(target, ...sources)

Important: the first argument is the target object, which will be modified. All subsequent arguments are sources of properties.

Merge Example

const user = { name: 'Anna', age: 28 };const updates = { age: 29, job: 'Developer' };

const merged = Object.assign({}, user, updates);console.log(merged);// { name: 'Anna', age: 29, job: 'Developer' }

Notice: we pass an empty object {} as the target. This ensures the source objects are not mutated — cloning JS objects is done correctly.

Pitfall: Shallow Copy

Object.assign() only performs a shallow copy. If you have nested objects, they will be copied by reference:

const obj1 = { data: { value: 10 } };const obj2 = { info: 'test' };

const merged = Object.assign({}, obj1, obj2);merged.data.value = 999;console.log(obj1.data.value); // 999 — mutation of the source object!

For deep merging, other approaches are needed, which we'll discuss below.

Method 2: Spread Operator — ES6 Elegance

With the advent of ES6, the JavaScript spread operator (three dots ...) became the most popular way to merge object properties. It's concise, readable, and doesn't require a method call.

Syntax

const merged = { ...obj1, ...obj2 };

Example

const defaults = { theme: 'light', lang: 'en', showSidebar: true };const userPrefs = { theme: 'dark', fontSize: 16 };

const settings = { ...defaults, ...userPrefs };console.log(settings);// { theme: 'dark', lang: 'en', showSidebar: true, font