Spread vs Rest Operators in JavaScript

Source: Dev.to

What spread operator does

The spread operator (...) is used to extract all items from an existing collection such as an array or an object. It is typically placed on the right side of an assignment (variable = ...something) or used in a function call (fn(...something)) to pass each item individually.

What rest operator does

The rest operator (...) collects individual items and wraps them into a single container (usually an array). It is commonly seen in function declarations (function fn(...params) {}) where it gathers all arguments passed to the function into one parameter.

Differences between spread and rest

Using spread with arrays and objects

The spread operator lets you merge arrays, add values, or create shallow copies of objects.

const postiveNums = [1,2,3,4];
const negativeNums = [-1, -2, -3, -4];
const user = {
    name: "anoop",
    salary: "50k",
};

// Merging with 0
console.log([...negativeNums, 0, ...postiveNums]);
// [-1, -2, -3, -4, 0, 1, 2, 3, 4]

// Copy by value
const copy = {...user};
copy.salary("80k");
console.log(user); // salary: "50k"
console.log(copy); // salary: "80k"

Practical use cases

Creating a shallow copy

A shallow copy created with the spread operator does not mutate the original object.

const user = {name: "anoop", isActive: true, salary: "50k"};
const temp = {...user};

temp.name = "dipesh";
temp.salary = "25k";

console.log(temp);
// {name: "dipesh", isActive: true, salary: "25k"}
console.log(user);
// {name: "anoop", isActive: true, salary: "50k"}

Merging values

You can combine objects (or arrays) and add additional properties.

const defaultSettings = {
    theme: "dark",
    font: 18,
    notification: true
};

const userPreference = {
    font: 24,
    notification: false
};

const settings = {
    ...defaultSettings,
    ...userPreference
};

console.log(settings);
/*
{
  theme: "dark",
  font: 24,
  notification: false
}
*/

With functions

Use the rest parameter to collect an unknown number of arguments, and the spread operator to pass array items individually.

// Rest Operator
function sumAll(...nums) {
    return nums.reduce((acc, cur) => acc + cur, 0);
}
console.log(sumAll(2, 4, 6, 3)); // 15

// Spread Operator
const nums = [2, 4, 6, 3];
const max = Math.max(...nums);
console.log(max); // 6

Summary

• Spread: Extracts items from a container; used for creating new data structures or passing arguments.
• Rest: Collects items into a container; used for capturing arguments.