What is difference between Spread and Rest Operator in JavaScript?

Introduction

The modern syntax introduced two powerful features: the spread operator and the rest operator. Both are represented by the same three dots (...), but they serve distinct purposes in different contexts. Understanding these operators is crucial for writing concise and effective code. In this article, we will delve into their differences, use cases, and practical examples.

The Spread Operator

The spread operator allows an iterable (such as an array or string) to be expanded in places where multiple elements are expected. It can be used in various scenarios, such as copying arrays, concatenating arrays, or spreading elements into function arguments.

Use Cases of the Spread Operator

1. Copying

   const originalArray = [1, 2, 3];
   const copiedArray = [...originalArray];
   console.log(copiedArray); // Output: [1, 2, 3]

2. Spreading Elements into Function Arguments

   function sum(a, b, c) {
     return a + b + c;
   }
   const numbers = [9, 10, 11];
   console.log(sum(...numbers)); // Output: 30

The Rest Operator

The rest operator allows you to handle an indefinite number of elements as an array. It is primarily used in function parameters to collect all remaining arguments into a single array.

Use Cases of the Rest Operator

1. Function Parameters

   function sum(...numbers) {
     return numbers.reduce((acc, curr) => acc + curr, 0);
   }
   console.log(sum(1, 2, 3, 4)); // Output: 10

2. Destructuring Assignments

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

Key Differences

1. Context of Use

• Spread Operator: Used in array literals, function calls, and object literals to spread elements or properties.
• Rest Operator: Used in function parameters and destructuring assignments to gather remaining elements or properties into an array or object.

2. Purpose

• Spread Operator: Expands an iterable into individual elements.
• Rest Operator: Gathers multiple elements into a single array or object.

Practical Example

Let’s see a practical example that utilizes both the spread and rest operators:

function displayNames(first, second, ...others) {
  console.log(`First: ${first}`);
  console.log(`Second: ${second}`);
  console.log(`Others: ${others.join(', ')}`);
}

const names = ['Alice', 'Bob', 'Charlie', 'Dave', 'Eve'];
displayNames(...names);

// Output:
// First: Alice
// Second: Bob
// Others: Charlie, Dave, Eve

In this example, the spread operator is used to pass the array elements as individual arguments to the displayNames function, while the rest operator collects the remaining arguments into the others array.

Conclusion

The spread and rest operators are powerful tools that enhance the flexibility and readability of code. By understanding their differences and appropriate contexts, you can leverage these operators to write more concise and efficient code. The spread operator helps in expanding elements, while the rest operator is perfect for collecting elements. Mastering these operators will undoubtedly improve your skills and code quality.

Frequently Asked Questions