Spread vs Rest Operators in JavaScript

Source: Dev.to

Lately I have been writing a lot of backend code and kept getting confused about when to use the spread operator and when to use the rest operator. Many developers face the same problem, so in this post I’ll break down the differences, show common use‑cases, and point out typical mistakes to avoid.

Topics to Cover

• What the rest operator does
• What the spread operator does
• Differences between spread and rest
• When to use each operator

Rest Operator

The rest operator collects the remaining values that are not explicitly listed. It is often used in destructuring assignments and function parameters.

Example (object destructuring)

const user = {
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "admin",
  password: "secret"
};

// REST → extract password, collect the rest
const { password, ...safeUser } = user;

console.log(safeUser);

Output

// Password is extracted
{ id: 1, name: "Kunal", email: "kunal@gmail.com", role: "admin" }

The rest operator appears on the left side of the assignment, gathering the remaining properties into a new object (or array when used with arrays).

Rest in function parameters

function sum(first, ...rest) {
  return rest.reduce((total, n) => total + n, first);
}

console.log(sum(1, 2, 3, 4)); // 9

Here ...rest collects all arguments after the first one into an array.

Spread Operator

The spread operator expands (or “spreads”) the elements of an iterable (array or object) into a new context. It is commonly used to copy or merge data structures.

Example (object merging)

const user = {
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "admin",
  password: "secret"
};

// SPREAD → merge / update object
const updatedUser = {
  ...user,
  role: "user"
};

console.log(updatedUser);

Output

{
  id: 1,
  name: "Kunal",
  email: "kunal@gmail.com",
  role: "user",
  password: "secret"
}

The spread operator is placed on the right side of an assignment, expanding the existing data so you can add or override properties.

Spread with arrays

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];
console.log(moreNumbers); // [1, 2, 3, 4, 5]

Differences Between Spread and Rest

When to Use Each Operator

• Rest Operator – Use when you need to collect the remaining items into an array or object, such as in:

  • Function parameter lists (function fn(a, b, ...rest) {})
  • Destructuring assignments (const { a, ...rest } = obj)

• Spread Operator – Use when you want to duplicate or merge data structures, such as:

  • Creating shallow copies of arrays/objects (const copy = [...original])
  • Merging multiple arrays or objects (const merged = { ...obj1, ...obj2 })
  • Expanding elements in function calls (myFunc(...args))

Thanks for reading! If you enjoyed this post, feel free to explore more articles on related topics.