Spread vs Rest Operators in JavaScript

If you’ve been writing modern JavaScript, you must have seen three dots being used in different places. Sometimes it is used to expand values, sometimes to collect values, and at first it feels like the same thing doing different jobs. That is where the confusion usually starts. The syntax looks the same, but the behavior depends on how and where it is used.
So the idea is simple. Spread is used to expand values, and rest is used to collect values. Same syntax, different purpose based on context.

What spread operator does

Spread operator is used to take values from an iterable like an array or object and expand them into individual elements. It basically opens up the structure and places the values where needed.

const numbers = [10, 20, 30];

const newNumbers = [...numbers];

console.log(newNumbers);

// Output:
// [10, 20, 30]

Here, the values from numbers are expanded into newNumbers. It is not referencing the same array, it creates a new one with copied values.

Spread is very useful when we want to copy or combine arrays.

const arr1 = [1, 2];
const arr2 = [3, 4];

const combined = [...arr1, ...arr2];

console.log(combined);

// Output:
// [1, 2, 3, 4]

Here both arrays are expanded and merged into one.

Using spread with objects

Spread also works with objects. It helps in copying properties or merging objects.

const user = {
  name: "Gaurang",
  age: 21
};

const updatedUser = {
  ...user,
  role: "Developer"
};

console.log(updatedUser);

// Output:
// { name: "Gaurang", age: 21, role: "Developer" }

Here all properties from user are expanded into updatedUser, and then a new property is added.

What rest operator does

Rest operator does the opposite of spread. Instead of expanding values, it collects multiple values into a single variable. It is commonly used in function parameters or destructuring.

function sum(...numbers) {
  console.log(numbers);
}

sum(10, 20, 30);

// Output:
// [10, 20, 30]

Here, all arguments are collected into the numbers array.
Rest can also be used in array destructuring.

const numbers = [10, 20, 30, 40];

const [first, ...rest] = numbers;

console.log(first);
console.log(rest);

// Output:
// 10
// [20, 30, 40]

Here first gets 10, and the remaining values are collected into rest.

Differences between spread and rest

Even though both use the same three dots syntax, their behavior is different based on usage. Spread is used when we want to expand values, rest is used when we want to collect values.
Spread is usually seen on the right side when assigning or passing values, while rest is usually seen on the left side when receiving values.

Practical use cases

Spread is commonly used when copying arrays or objects, merging multiple arrays, or passing elements as individual arguments to functions.

const numbers = [1, 2, 3];

function add(a, b, c) {
  console.log(a + b + c);
}

add(...numbers);

// Output:
// 6

Here spread expands the array into individual arguments.
Rest is useful when we do not know how many arguments will be passed and we want to handle them as a group.

function logAll(...values) {
  console.log(values);
}

logAll("a", "b", "c");

// Output:
// ["a", "b", "c"]

It collects all arguments into a single array.

Final clarity

Spread and rest use the same syntax but solve opposite problems. Spread expands values from arrays or objects, while rest collects multiple values into one variable. Once you focus on whether values are being expanded or collected, it becomes easy to understand where to use each of them.