JavaScript Spread vs Rest Operator: Key Differences Explained with Examples

If you’ve been working with JavaScript ES6+ features, you’ve likely come across the three-dot syntax ... used in different contexts. This syntax can either be the spread operator or the rest operator, depending on how it's used. Although they look identical, their purposes are quite different.

In this article, we’ll explore the differences between the JavaScript spread and rest operators, how they work, and when to use each—with clear code examples.

What is the Spread Operator in JavaScript?

The spread operator is used to expand an iterable (like an array, object, or string) into individual elements. It’s commonly used when you need to pass elements individually instead of as a group.

🔹 Spread Operator Syntax:

const newArray = [...oldArray];

Use Cases for Spread Operator:

1. Copying or Combining Arrays

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]

2. Passing Array Elements as Arguments

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
const result = sum(...numbers);
console.log(result); // Output: 6

3. Merging or Copying Objects

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // Output: { a: 1, b: 2, c: 3 }

What is the Rest Operator in JavaScript?

The rest operator is used to collect multiple elements into a single array. It’s especially useful when working with functions that accept an unknown number of arguments or when destructuring arrays or objects.

🔹 Rest Operator Syntax:

function example(...args) {
  // args is an array
}

Use Cases for Rest Operator:

1. Function Parameters

function myFunc(first, ...rest) {
  console.log(first);  // Output: 1
  console.log(rest);   // Output: [2, 3, 4]
}
myFunc(1, 2, 3, 4);

2. Destructuring Arrays

const [first, second, ...remaining] = [1, 2, 3, 4, 5];
console.log(first);     // Output: 1
console.log(second);    // Output: 2
console.log(remaining); // Output: [3, 4, 5]

Key Differences Between Spread and Rest Operators

Summary

While the spread and rest operators use the same syntax (...), they serve opposite functions:

• The spread operator expands elements of an iterable.

• The rest operator collects multiple values into an array.

✅ Use spread when:

• You want to pass or copy multiple values.

• You're merging arrays or objects.

✅ Use rest when:

• You're handling variable function arguments.

• You need to gather remaining elements during destructuring.

Conclusion

Understanding the difference between spread vs rest operator in JavaScript is crucial for writing clean, concise, and modern code. By mastering both, you can simplify tasks involving arrays, objects, and function parameters.
Learn more on Javascript - Javascript Tutotial