Spread syntax
Three dots spread an array or object into separate items.
Available since: ES2015
Syntax
[...iterable] / { ...object } / fn(...args)Examples
Copying and merging arrays:
const a = [1, 2];
const b = [3, 4];
console.log([...a, ...b, 5].join(', '));Output:
1, 2, 3, 4, 5A copy of an object with a changed field:
const user = { name: 'Anna', city: 'Berlin' };
const moved = { ...user, city: 'Paris' };
console.log(moved.city, user.city);Output:
Paris BerlinAn array as a list of arguments:
const numbers = [5, 1, 9];
console.log(Math.max(...numbers));Output:
9Notes
The copy is shallow: nested objects stay shared. With duplicate keys the later one wins.
The same three dots in function parameters or in destructuring mean the opposite — collecting into an array (rest).
See also
- Rest parameters — Collects the remaining function arguments into an array.
- Destructuring assignment — Unpacks values from an array or object into separate variables.
- Array.prototype.concat — Merges arrays into a new array.
- Object.assign — Copies properties from some objects into another.
In the tutorial
- The spread and rest operators — The three dots in JavaScript — spreading arrays and objects, copying, merging and rest parameters.