Spread (.
The spread syntax spreads an array, string, or object out into individual elements: for copying, merging, and passing arguments.
Example
#const frontend = ['HTML', 'CSS']
const backend = ['Node.js']
const stack = [...frontend, 'JavaScript', ...backend]
console.log(stack)
const scores = [72, 95, 88]
console.log(Math.max(...scores))Definition and usage
#Three dots before an array, a string, or another iterable object “spill” its elements out wherever a list of values is expected: in a new array [...a, ...b], or in the arguments of a call Math.max(...scores).
Spread also works in object literals: { ...user, active: true } copies user’s own enumerable properties into a new object. Properties written later overwrite earlier ones, which makes it easy to create an updated copy, or to merge default settings with custom ones.
The copy is shallow. Nested objects and arrays aren’t copied, only shared, so changing one in the copy also changes the original. For a deep copy, use structuredClone(). The same three dots in function parameters or in destructuring mean the opposite operation, collecting the rest of the elements (rest).
Syntax
#const copy = [...array]
const merged = [...first, ...second]
fn(...args)
const clone = { ...object }
const updated = { ...object, key: value }More examples
#const defaults = { theme: 'dark', sounds: true, fontSize: 16 }
const userSettings = { sounds: false }
const settings = { ...defaults, ...userSettings }
console.log(settings)
console.log(defaults)const original = { name: 'Emma', badges: ['start'] }
const copy = { ...original }
copy.name = 'Mia'
copy.badges.push('streak')
console.log(original)
console.log(copy)The badges array is shared by both objects. When you need an independent copy of nested data, use structuredClone(original).
console.log([...'Dev'])
const tags = ['js', 'css', 'js', 'html', 'css']
console.log([...new Set(tags)])Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Spreading into objects only copies own, enumerable properties. Prototype methods don’t carry over, so copying a class instance turns it into a plain object.
- Order matters: in
{ ...defaults, ...custom }, the values fromcustomwin, and in{ ...custom, ...defaults }, the ones fromdefaultsdo. - With very large arrays (hundreds of thousands of elements),
Math.max(...array)can exceed the function argument limit.reduce()is safer there.
Related entries
#- DestructuringDestructuring pulls values out of arrays and objects straight into separate variables.
- Array.prototype.concat()Combines arrays and values into a new array.
- Object.assign()Copies properties from one or more objects into a target object.
- structuredClone()Creates a deep copy of a value, including nested objects, dates, Maps, and Sets.
- functionDeclares a named function: a block of code with parameters that you can call any number of times and that can return a result.
- Rest parameter (...rest)Collects all the remaining function arguments into a real array. You write it as ...name at the end of the parameter list.
Spotted a mistake or missing an example? Write to us.