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 fromnumbers 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 »const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];
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 »brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}
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.
