JavaScriptArraysBeginner

Spread operator for arrays (...)

Expands an array into elements (copy, merge, or pass args).

Review the syntaxStudy the examplesOpen the coding app
const copy = [...array];
const merged = [...a, ...b];
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

Expands an array into elements (copy, merge, or pass args).

The spread operator (...) 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. Introduced in ES6, it provides a declarative syntax for merging, cloning, and manipulating arrays. Technically, spread performs a shallow copy: while the top-level structure is a new array reference, nested objects or arrays continue to point to their original memory locations. Performance-wise, spread is O(n), similar to Array.prototype.concat() or slice(). For very large arrays (e.g., >100,000 elements), spreading into function arguments (Math.max(...arr)) can trigger a 'Maximum call stack size exceeded' error because engines have limits on the number of arguments a function can accept. IE is not supported.

Quick reference

Syntax

const copy = [...array];
const merged = [...a, ...b];

See it in practice

Examples

1

Merging Arrays Fluently

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'potato'];
const food = [...fruits, 'egg', ...vegetables];
Output:
['apple', 'banana', 'egg', 'carrot', 'potato']

Spread allows for inserting multiple arrays and individual elements into a new array literal at any position.

2

Immutably Shallow Copying

const original = [1, 2, { id: 101 }];
const copy = [...original];
copy[0] = 99;
// Note: copy[2] still references the same object as original[2]
console.log(original[0]);
Output:
1

Creates a new array reference. Modifying primitive values in the copy does not affect the original, but nested objects remain shared.

3

Converting Iterables to Arrays

const title = 'JS';
const chars = [...title];

const set = new Set([1, 2, 2, 3]);
const uniqueList = [...set];
Output:
chars: ['J', 'S'], uniqueList: [1, 2, 3]

Spread works on any iterable protocol, making it a concise alternative to Array.from() for Strings, Sets, and Maps.

Debug faster

Common Errors

1

TypeError

Cause: Attempting to spread a non-iterable value like 'null', 'undefined', or a plain object into an array literal.

Fix: Ensure the target is an array/iterable or provide a fallback empty array using short-circuiting.

const data = null;
const list = [...data]; // Throws: data is not iterable
2

LogicError

Cause: Assuming spread performs a deep copy of nested objects.

Fix: Use structuredClone(array) or a recursive deep-copy utility if the array contains nested objects that should not be shared.

const items = [{ active: true }];
const copy = [...items];
copy[0].active = false; // This changes 'items' as well!

Runtime support

Compatibility

Node.js, BrowserAll modern browsers, IE not supportedES6 (2015)

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Expands an array into elements (copy, merge, or pass args).

TypeError: Ensure the target is an array/iterable or provide a fallback empty array using short-circuiting. LogicError: Use structuredClone(array) or a recursive deep-copy utility if the array contains nested objects that should not be shared.