Spread vs Rest Operators in JavaScript
What Spread Operator Does
The spread operator (...) is used to expand or “spread” elements of an iterable (like an array, string, or object) into individual elements. It is commonly used when you want to copy, merge, or pass multiple values easily. For example, in an array, it takes each item and places it separately into a new array or function. It helps avoid manual loops and makes code shorter and cleaner.
Example:
const array1 = [1, 2, 3]; const array2 = [...array1]; // [1, 2, 3]
It can also be used to merge arrays or objects:
const merged = [...array1, 4, 5];
For objects:
const obj = {a: 1, b: 2}; const newObj = {...obj, c: 3};
In short, spread “opens up” elements and places them wherever needed.
What Rest Operator Does
The rest operator (...) collects multiple elements and packs them into a single array or object. It is used mainly in function parameters or destructuring when you don’t know how many values will come. Instead of spreading values, it gathers them.
Example in functions:
function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); } sum(1, 2, 3, 4); // 10
Here, numbers becomes [1, 2, 3, 4].
In array destructuring:
const [first, ...rest] = [1, 2, 3, 4]; // first = 1, rest = [2, 3, 4]
In objects:
const {a, ...others} = {a: 1, b: 2, c: 3}; // others = {b: 2, c: 3}
Differences Between Spread and Rest
Although both use the same syntax (...), their purpose is opposite. The spread operator expands values, while the rest operator collects values. Spread is used when you want to break an array or object into individual elements, whereas rest is used when you want to group multiple elements into one variable.
Another difference is where they are used. Spread is commonly used in array/object creation and function calls, while rest is mainly used in function parameters and destructuring.
Example:
// Spread const arr = [1, 2]; const newArr = [...arr, 3];
// Rest function test(...args) { console.log(args); }
Also, rest must always be the last parameter in functions or destructuring. Spread has no such restriction. In short: spread = expand, rest = collect.
Using Spread with Arrays and Objects
The spread operator is extremely useful when working with arrays and objects. With arrays, it allows copying, merging, or adding elements easily without modifying the original array.
Example:
const arr1 = [1, 2]; const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
This creates a new array instead of changing arr1.
For objects, spread helps clone or extend objects:
const user = {name: "Divit", age: 13}; const updatedUser = {...user, age: 14};
It is also useful for combining objects:
const obj1 = {a: 1}; const obj2 = {b: 2}; const combined = {...obj1, ...obj2};
Spread ensures immutability, meaning the original data stays unchanged, which is very important in modern JavaScript frameworks like React.
Practical Use Cases
Spread and rest operators are widely used in real-world coding. One common use case is copying data safely without affecting the original, especially in apps where state management matters. For example, updating a user profile:
const updated = {...user, name: "New Name"};
Another use is merging arrays or objects when handling API data.
Rest is useful in functions where the number of arguments is unknown, such as logging or calculations:
function logAll(...messages) { console.log(messages); }
In destructuring, rest helps separate needed values from the rest:
const {id, ...data} = user;
Spread is also helpful in function calls:
Math.max(...[1, 5, 3]); // 5