Spread vs Rest Operators in JavaScript

If you've have looked at a block of modern JavaScript and the three little dots (...) appearing everywhere in the code. These are not typos rather they are most versatile tools in JavaScript used in modern JavaScript development and they are called as Rest and Spread operators in JavaScript.

They look quite same, but in reality they are opposite of each other. Think of a magical tool one is used to unpack everything from a bag and other one is used to cover up in one single bag.

The Spread Operator: "The Unpacker"

The spread operator takes an iterable (like an object or array) and expands it into individual elements. It "spreads" the values out.

Using Spread with Arrays

Imagine you have two lists and you want to combine them. Instead of lopping them you just spread them into a new array.

const fruits = ['apple', 'banana'];
const veggies = ['carrot', 'potato'];

const groceryList = [...fruits, ...veggies, 'milk']; 
// Result: ['apple', 'banana', 'carrot', 'potato', 'milk']

Using Spread with Objects

Spread is actually very useful for shallow copying of objects and for updating properties without mutating original object.

const user = { name: 'Alex', age: 25 };
const updatedUser = { ...user, age: 26 }; 

// updatedUser: { name: 'Alex', age: 26 }

The Rest Operator: "The Collector"

The rest operator does the opposite. It collects multiple individual elements and condenses in to one array. It is used in functions parameters or destructing.

Rest in Function Parameters

When you don't know how many arguments will pass to your function, "Rest" captures them all.

function sumAll(...numbers) {
  // 'numbers' is now a real array we can loop over
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sumAll(1, 2, 3, 4)); // 10

Rest in Destructing

You can Rest to "keep the leftovers" when extracting values from an array or object.

const [first, second, ...theRest] = [10, 20, 30, 40, 50];

// first: 10
// second: 20
// theRest: [30, 40, 50]

Key Differences: Expanding vs. Collecting

The easy way to distinguish between them is by looking where they are used:

Feature	Spread Operator	Rest Operator
Action	Expands an iterable into elements.	Collects elements into an array.
Location	Used in function calls or array/object literals.	Used in function signatures or destructuring.
Purpose	Creating copies or merging data.	Handling variable arguments or "leftovers."

Practical Real-World Usage

Real World Spread: Avoiding Mutation

In React, we don't update state directly so first we make a shallow copy by using spread operator and then updating it.

• Pattern: const newState = [...oldState, newItem];

Real World Rest: API Wrappers

If you are writing a function that wraps another function (a logger), you can use Rest to pass along any number of arguments.

function logger(label, ...data) {
  console.log(`[${label}]`, data);
}

logger("API_ERROR", 404, "Not Found", { attempt: 3 });

Summary

• Use Spread when you need to take out values from one box and put it in to new box.

• Use Rest when you want to gather scattered values and put them into a new box.