JavaScript Object Spread Operator (...) Syntax Guide

•

Updated October 12, 2026

Direct Answer & Overview

The JavaScript object spread operator (...) copies enumerable own properties from one or more source objects into a new target object literal. It is standard across modern state management libraries for immutable updates and shallow cloning.

#spread-operator#objects#immutability#es6

JavaScript Source Code

example.js

const user = {
  name: "Suresh",
  age: 30
};

const updatedUser = {
  ...user,
  age: 31
};

console.log(updatedUser);

How does this JavaScript code work?

Introduced in ES2018, the object spread operator (`{ ...user, age: 31 }`) allows shallow copying of properties into a new object literal. Properties declared after the spread operator override matching properties copied from the source object. This provides a clean, declarative syntax for immutable updates, avoiding mutations to original state objects.

What is the expected terminal output?

Executing this code in JS CodeLab produces the following stdout sequence in the developer console:

Console Standard Output

{"name":"Suresh","age":31}

Common mistakes to avoid

!Assuming the spread operator creates a deep clone; nested objects and arrays are copied by memory reference, not cloned.
!Placing the spread operator after override properties, causing copied properties to accidentally overwrite the intended updates.
!Using the spread operator on deeply nested objects without spreading each intermediate level, inadvertently causing mutations.
!Confusing the spread operator with the rest operator; spread expands elements, while rest condenses remaining items into an object.

Frequently Asked Questions

Does the object spread operator perform a deep copy?

No. Object spread performs a shallow copy. If an object contains nested objects or arrays, the references to those nested structures are shared.

How do you deeply clone an object in modern JavaScript?

Use the built-in structuredClone() function (supported across all modern browsers and Node.js) for true deep cloning without prototype loss.

What happens if two spread objects share the same property key?

The object spread last takes precedence and overwrites any previously spread value with the same key.

Comprehensive Tutorial

Want an in-depth understanding of this topic?

Read our complete, interactive tutorial covering memory management, edge cases, and best practices.

Read the full spread rest tutorial →

object basics →object destructuring →