What are the Rest and Spread operators in JavaScript?

Rest and Spread Operators in JavaScript (...)

The Rest Operator and Spread Operator both use three dots (...), but they serve different purposes depending on how and where they are used.

---

🟢 1. Rest Operator (...)

The Rest Operator is used in function parameters to collect multiple arguments into a single array.

Syntax:

javascriptCopyEditfunction myFunction(...args) {
  console.log(args);
}

Key Points:

• Gathers remaining arguments into an array.
• Used in function parameters.
• Always comes at the end of the function parameters.

Example:

javascriptCopyEditfunction sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // Output: 10

Another Example with Mixed Parameters:

javascriptCopyEditfunction greet(greeting, ...names) {
  console.log(`${greeting}, ${names.join(', ')}`);
}

greet('Hello', 'John', 'Jane', 'Doe');
// Output: Hello, John, Jane, Doe

---

🟣 2. Spread Operator (...)

The Spread Operator is used to expand elements of an iterable (like an array or object) into individual elements.

Key Points:

• Expands elements of an array, object, or string.
• Used in array literals, function calls, and object literals.

---

Spread with Arrays:

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

Spread with Objects:

javascriptCopyEditconst user = { name: 'John', age: 25 };
const updatedUser = { ...user, city: 'New York' };
console.log(updatedUser);
// Output: { name: 'John', age: 25, city: 'New York' }

Spread in Function Calls:

javascriptCopyEditconst numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // Output: 3

---

Rest vs Spread Summary:

Feature	Rest Operator (...args)	Spread Operator (...array)
Purpose	Collects multiple values into an array	Spreads array/object elements out
Usage	Function Parameters	Arrays, Objects, Function Calls
Result	Creates an array	Expands values into individual elements
Example	function sum(...nums) {}	[...array1, ...array2]

---

Example Using Both Rest and Spread Together:

javascriptCopyEditfunction multiply(multiplier, ...numbers) {
  return numbers.map(num => num * multiplier);
}

const nums = [1, 2, 3];
console.log(multiply(2, ...nums)); // [2, 4, 6]

---

When to Use:

Use Case	Operator
Combine Arrays	Spread (...)
Clone Arrays/Objects	Spread (...)
Pass Array as Arguments	Spread (...)
Collect Function Arguments	Rest (...)
Handle Variable Parameters	Rest (...)

The Rest and Spread Operators make JavaScript code more concise and readable, especially in modern ES6+ development.