How TO - The Spread Operator (...)
Learn how to use the three dots operator (...) a.k.a the spread operator in JavaScript.
The Spread Operator
The JavaScript spread operator (...) expands
an iterable (like an array) into more elements.
This allows us to quickly copy all or parts of an existing array into another array:
Example
Assign the first and second items from numbers to variables and put the rest in an array:
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const
numbersCombined = [...numbersOne, ...numbersTwo];
Try it Yourself »
The spread operator is often used to extract only what's needed from an array:
We can use the spread operator with objects too:
Example
const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year:
2021,
color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle,
...updateMyVehicle}
Try it Yourself »
Notice the properties that did not match were combined, but the property that did match, color, was overwritten by the last object that was passed, updateMyVehicle. The resulting color is now yellow.
See also: JavaScript ES6 Tutorial.
