This operator spread the content of 1 object into another.
Example: Using 3 points before arrays to list the elements inside
var cats = ["Tabby", "Siamese", "Persian"];
var dogs = ["Golden Retriever", "Pug", "Schnauzer"];
var animals = ["Whale", "Giraffe", cats, "Snake", dogs, "Coyote"];
console.log(animals);
animals = ["Whale", "Giraffe", ...cats, "Snake", ...dogs, "Coyote"];
console.log(animals);
Output:
[ 'Whale',
'Giraffe',
[ 'Tabby', 'Siamese', 'Persian' ],
'Snake',
[ 'Golden Retriever', 'Pug', 'Schnauzer' ],
'Coyote' ]
[ 'Whale',
'Giraffe',
'Tabby',
'Siamese',
'Persian',
'Snake',
'Golden Retriever',
'Pug',
'Schnauzer',
'Coyote' ]
Example 2:
const person = {
name: 'Jimmy Smith',
age: 40,
hairColor: 'brown',
eyeColor: 'blue',
};
const careerData = {
name: 'Bob Smith',
title: 'developer',
company: 'ABC Software',
};
const updates = {
name: 'James Smith',
};
const updatedPerson = {
...person,
...updates,
};
console.log(updatedPerson);
{ name: 'James Smith',
age: 40,
hairColor: 'brown',
eyeColor: 'blue' }
Example 3:
const numbers = [1, 2, 3, 4, 5];
const newNumbers = [
0,
...numbers,
6,
];
console.log(newNumbers);
[ 0, 1, 2, 3, 4, 5, 6 ]
Sources: https://www.linkedin.com/learning/learning-functional-programming-with-javascript-es6-plus