As per MDN
Spread syntax (
...
) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
Let’s understand it using examples
Expanding strings
const whoAmI = "I am Spider-Man";
console.log(whoAmI);
console.log('Array of chars', [...whoAmI]);
I am Spider-Man Array of chars [ 'I', ' ', 'a', 'm', ' ', 'S', 'p', 'i', 'd', 'e', 'r', '-', 'M', 'a', 'n' ]
Expanding arrays
const avengers = ['Iron Man', 'Captain America', 'Hulk', 'Hawkeye', 'Black Widow'];
console.log(avengers);
console.log(...avengers);
[ 'Iron Man', 'Captain America', 'Hulk', 'Hawkeye', 'Black Widow' ] Iron Man Captain America Hulk Hawkeye Black Widow
Concatenating arrays
const array1 = ['et', 'tu'];
const array2 = ['brute'];
const concatenated = [...array1, ...array2];
console.log(concatenated);
[ 'et', 'tu', 'brute' ]
Copying arrays
const yesterdaysList = ['bread', 'eggs', 'vegetables', 'milk'];
const todaysList = [...yesterdaysList];
console.log(todaysList);
[ 'bread', 'eggs', 'vegetables', 'milk' ]
Shallow copying objects
const commandoDroid = {
appearance: 'Star Wars: The Clone Wars',
affiliations: 'Confederacy of Independent Systems',
height: '1.91m',
weapon: 'Blaster Rifle'
};
const droid1 = { ...commandoDroid, name: 'Droid 1' };
const droid2 = { ...commandoDroid, name: 'Droid 2' };
console.log(droid1, droid2);
{ appearance: 'Star Wars: The Clone Wars', affiliations: 'Confederacy of Independent Systems', height: '1.91m', weapon: 'Blaster Rifle', name: 'Droid 1' } { appearance: 'Star Wars: The Clone Wars', affiliations: 'Confederacy of Independent Systems', height: '1.91m', weapon: 'Blaster Rifle', name: 'Droid 2' }
Variable length arguments
function sum(...args) {
let sum = 0;
for (let x of args) {
sum += x;
}
return sum;
}
console.log(sum(1, 2, 3, 4, 5, 6, 7));
28