Spread in Objects0%
Object Destructuring in Depth

Spread in Objects

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

Spread in Objects in Modern JavaScript

Introduced in ES2018 (ES9), the object spread operator (...) allows developers to spread own enumerable properties of an object into a new object literal. It is the gold standard for immutable state management in modern JavaScript and React architectures.

1. Syntax & Core Mechanics

The spread syntax expands the key-value pairs of an existing object into a newly declared object:

JavaScript
const user = {
id: 42,
username: 'coder_raj'
};
 
const profile = {
...user,
role: 'Developer',
country: 'India'
};
 
console.log(profile);
// { id: 42, username: 'coder_raj', role: 'Developer', country: 'India' }

2. Immutable State Updates

In modern state management (Redux, Zustand, React useState), mutating existing state objects directly causes rendering bugs. The spread operator allows clean, immutable property updates:

JavaScript
const initialSession = {
user: 'Sarah',
isAuthenticated: true,
theme: 'light',
lastLogin: '2026-03-01'
};
 
// Updating theme immutably
const updatedSession = {
...initialSession,
theme: 'dark' // Overwrites previous 'theme' value!
};
 
console.log(initialSession.theme); // 'light' (Preserved!)
console.log(updatedSession.theme); // 'dark'

Overwriting Rule

Property order matters! Later properties overwrite earlier ones:

JavaScript
const defaultOptions = { retries: 3, timeout: 5000 };
 
// Correct: user options override defaults
const opts1 = { ...defaultOptions, timeout: 10000 }; // timeout: 10000
 
// Danger: defaults override user options!
const opts2 = { timeout: 10000, ...defaultOptions }; // timeout: 5000!

3. Merging Multiple Objects

You can combine any number of objects into a single new object:

JavaScript
const contact = { email: 'sarah@example.com', phone: '+1-555-0199' };
const address = { city: 'Vancouver', postalCode: 'V6B' };
const preferences = { newsletter: true };
 
const customerRecord = {
id: 'CUST-104',
...contact,
...address,
...preferences
};

4. Nested Object Updates (Immutability Pattern)

Because the spread operator only copies one level deep (shallow copy), nested objects must be spread explicitly to avoid mutating original nested references:

JavaScript
const state = {
user: {
name: 'Alex',
preferences: {
notifications: true,
sound: false
}
}
};
 
// Updating sound to true IMMUTABLY:
const nextState = {
...state,
user: {
...state.user,
preferences: {
...state.user.preferences,
sound: true
}
}
};
 
console.log(state.user.preferences.sound); // false (Untouched!)
console.log(nextState.user.preferences.sound); // true
Output
Nested Immutability Structure:
nextState
├── ...state (shallow copy top level)
└── user: {
├── ...state.user
└── preferences: {
├── ...state.user.preferences
└── sound: true (overwritten leaf property)
}
}

5. Spreading Null, Undefined, or Primitives

Unlike functions expecting objects, spreading null or undefined inside an object literal is completely safe and evaluates to nothing (no properties added):

JavaScript
const extraData = null;
const safeObj = {
base: 'ok',
...extraData // Completely ignored, does NOT throw an error!
};
 
console.log(safeObj); // { base: 'ok' }
Interactive Quiz

Practice Quiz

Question 1
What is the result of { a: 1, b: 2, a: 5 }?
Question 2
What happens if you spread null or undefined inside an object literal ({ ...null })?
Question 3
Why is object spread heavily favored in React and modern UI state management?
Question 4
In const res = { ...user, age: 30 }, what happens if user already contains age: 25?
Question 5
Does spreading a nested object ({ ...state }) create deep copies of its inner objects?
Next Lesson

Object Destructuring in Depth

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

Related Lessons

Previous LessonNext Lesson
Object.assign()Object Destructuring in Depth

Practice Quiz

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

PreviousNext
PrevNext