JavaScriptEasy
What are the benefits of using spread syntax in JavaScript and how is it different from rest syntax?
By FrontendPro Editorial Team Updated 8/8/2026
#JavaScript
Answer
Spread syntax (...) allows an iterable (like an array or string) to be expanded into individual elements. This is often used as a convenient and modern way to create new arrays or objects by combining existing ones.
| Operation | Traditional | Spread |
|---|---|---|
| Array cloning | arr.slice() | [...arr] |
| Array merging | arr1.concat(arr2) | [...arr1, ...arr2] |
| Object cloning | Object.assign({}, obj) | { ...obj } |
| Object merging | Object.assign({}, obj1, obj2) | { ...obj1, ...obj2 } |
Rest syntax is the opposite of what spread syntax does. It collects a variable number of arguments into an array. This is often used in function parameters to handle a dynamic number of arguments.
js
// Using rest syntax in a function
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // Output: 6
Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.