Widely available A standard tool for modern JavaScript, especially in immutable update patterns and function calls.

Spread syntax

The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created.

Spread syntax looks exactly like rest syntax. In a way, spread syntax is the opposite of rest syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element. See rest parameters and rest property.

SyntaxArraysObjects

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
spread
46
12
16
8
46
8
spread in arrays

Spread in array literals
46
12
16
8
46
8
spread in function calls

Spread in function calls
46
12
27
8
46
8
spread in object literals

Spread in object literals
60
79
55
11.1
60
11.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
// Array spread
const arr = [1, 2, 3];
const copy = [...arr];
const merged = [...arr, 4, 5];

// Object spread
const obj = { a: 1, b: 2 };
const clone = { ...obj };
const updated = { ...obj, b: 3, c: 4 };

// Function arguments
Math.max(...arr); // 3

Live demo

Array. copi- and m-j

Spread syntax in array shallowcopi-, multiple. Array join in..

JavaScript
Output
Press the Run button

Object. m-j and topwrite

Object. spred in m-j.after from writeproperty that priority..

JavaScript
Output
Press the Run button

Function. Argument to spread

Array. Element individual. Argument and function to..

JavaScript
Output
Press the Run button

Use cases

  • Copy and merge data

    Create updated arrays or objects without mutating the original value.

  • Expanding function arguments

    Pass array values into APIs such as Math.max or custom functions without manual indexing.

Cautions

  • Spread creates shallow copies only, so nested objects and arrays are still shared references.
  • Repeated spreading in hot paths can create extra allocations and reduce performance.

Accessibility

  • Immutable updates built with spread can reduce UI bugs where visible state changes unexpectedly or fails to re-render.

Related links