Spread syntax
Spread syntax expands iterable items or object properties into a new literal. It is widely used for copying, merging, and passing variable-length arguments.
Overview
Spread syntax expands iterable items or object properties into a new literal. It is widely used for copying, merging, and passing variable-length arguments.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 46 | 12 | 16 | 8 | 46 | 8 | |
| Spread in array literals | 46 | 12 | 16 | 8 | 46 | 8 |
| Spread in function calls | 46 | 12 | 27 | 8 | 46 | 8 |
| 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); // 3Live 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
Powered by web-features