JavaScriptObjectsBeginner

Spread operator for objects (...)

Copies/merges objects immutably using the spread operator.

Review the syntaxStudy the examplesOpen the coding app
const merged = { ...a, ...b };
const updated = { ...obj, key: newValue };
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Copies/merges objects immutably using the spread operator.

The object spread operator, introduced in ES2018, allows for the creation of a new object literal by copying enumerable own properties from a source object. It is a declarative alternative to Object.assign(). Technically, it performs a shallow copy: while top-level primitive values are duplicated, any nested objects or arrays are copied by reference. Performance is typically O(N) where N is the number of properties being copied. Developers should be aware that spread does not copy inherited properties (from the prototype chain) or non-enumerable properties. When merging multiple objects, the property order is significant; if multiple objects share the same key, the value from the last object spread (or the last key explicitly defined) will overwrite previous values. IE is not supported.

Quick reference

Syntax

const merged = { ...a, ...b };
const updated = { ...obj, key: newValue };

See it in practice

Examples

1

Merging and Overriding Properties

const defaults = { theme: 'light', showSidebar: true };
const userSettings = { theme: 'dark' };
const finalConfig = { ...defaults, ...userSettings };
Output:
{ "theme": "dark", "showSidebar": true }

Properties from userSettings overwrite those in defaults because userSettings is spread later in the object literal.

2

Immutable State Update

const profile = { id: 1, username: 'dev_user', role: 'guest' };
const updatedProfile = { ...profile, role: 'admin' };
Output:
{ "id": 1, "username": "dev_user", "role": "admin" }

Commonly used in React or Redux to return a new object reference with specific property modifications without mutating the original state.

3

The Shallow Copy Effect

const original = { name: 'App', meta: { version: '1.0' } };
const copy = { ...original };
copy.meta.version = '2.0';
console.log(original.meta.version);
Output:
"2.0"

Because spread performs a shallow copy, the 'meta' object is shared by reference. Updating the copy's nested property affects the original object.

Debug faster

Common Errors

1

LogicError

Cause: Placing the spread operator after an explicit property definition, causing the explicit property to be overwritten by the spread object's defaults.

Fix: Ensure the spread operator comes before any specific property overrides.

const user = { name: 'Alice', ...{ name: 'Default' } }; // Result: name is 'Default'
2

LogicError

Cause: Assuming spread creates a deep clone of nested objects or arrays.

Fix: For deep nesting, spread each level individually or use structuredClone() for a true deep copy.

const obj = { a: { b: 1 } };
const copy = { ...obj }; // copy.a is the same reference as obj.a

Runtime support

Compatibility

Node.js, BrowserAll modern browsersES2018

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Copies/merges objects immutably using the spread operator.

LogicError: Ensure the spread operator comes before any specific property overrides. LogicError: For deep nesting, spread each level individually or use structuredClone() for a true deep copy.