Object.assign()0%
Spread in Objects

Object.assign()

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Object.assign() in Modern JavaScript

Object.assign() copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object. Prior to the ES2018 object spread operator, Object.assign() was the primary mechanism for object cloning and merging.

1. Syntax and Core Mechanics

JavaScript
Object.assign(target, ...sources);
  • target: The target object to receive properties. This object is mutated in-place!
  • ...sources: One or more source objects containing properties to copy.
  • Return Value: The mutated target object.
JavaScript
const target = { a: 1 };
const source = { b: 2, c: 3 };
 
const returnedTarget = Object.assign(target, source);
 
console.log(target); // { a: 1, b: 2, c: 3 } (Mutated!)
console.log(returnedTarget === target); // true (Same object reference!)

2. Non-Mutating Cloning & Merging

To avoid mutating existing objects, always pass an empty object {} as the first argument (target):

JavaScript
const defaultSettings = {
theme: 'light',
fontSize: 14,
notifications: true
};
 
const userCustomizations = {
theme: 'dark',
fontSize: 16
};
 
// Merging safely into a new object:
const appConfig = Object.assign({}, defaultSettings, userCustomizations);
 
console.log(appConfig);
// { theme: 'dark', fontSize: 16, notifications: true }
console.log(defaultSettings.theme); // 'light' (Untouched!)
Output
Source 1: defaultSettings ────┐
├──► Target: {} ──► Resulting Config
Source 2: userCustomizations ─┘

3. Precedence and Overwriting Order

Properties are copied from left to right. Later sources overwrite earlier sources if keys collide:

JavaScript
const o1 = { x: 1, y: 1 };
const o2 = { y: 2, z: 2 };
const o3 = { z: 3 };
 
const merged = Object.assign({}, o1, o2, o3);
console.log(merged); // { x: 1, y: 2, z: 3 }

4. Object.assign() vs. Object Spread Operator ({ ...obj })

Both achieve shallow cloning and property merging, but there are important nuances:

FeatureObject.assign(target, source)Object Spread { ...source }
In-place MutationCan mutate target directly (Object.assign(existing, source))Always creates a brand-new object
Setters TriggeredInvokes setters on the target objectDoes not trigger setters on target (defines own properties)
ReadabilityFunctional method callCompact, idiomatic modern syntax
PrototypesDoes not copy prototype chainDoes not copy prototype chain
JavaScript
// Functional equivalent of Object.assign({}, a, b):
const mergedViaSpread = { ...defaultSettings, ...userCustomizations };

5. Important Limitation: Shallow Copying Only

Like the spread operator, Object.assign() does not perform deep copies:

JavaScript
const base = { config: { debug: true } };
const clone = Object.assign({}, base);
 
clone.config.debug = false;
console.log(base.config.debug); // false! Both share the same nested config reference.
Interactive Quiz

Practice Quiz

Question 1
What does Object.assign(target, source) do to the target object?
Question 2
How can you use Object.assign() to clone an object without mutating the original?
Question 3
If sourceA has { timeout: 1000 } and sourceB has { timeout: 5000 }, what is the timeout value in Object.assign({}, sourceA, sourceB)?
Question 4
Does Object.assign() perform a deep copy of nested objects?
Question 5
What is the modern syntactic equivalent of Object.assign({}, objA, objB)?
Next Lesson

Spread in Objects

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Object.keys, Object.values, Object.entriesSpread in Objects

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext