Rest-and-spread-operators.md

What Are Rest and Spread Operators in JavaScript ?

The rest and spread operators, both denoted by ..., are powerful features introduced in ES6. Despite their similar syntax, they serve different purposes depending on how and where they are used.

---

1. The Rest Operator

The rest operator collects multiple elements or properties into a single variable. It is commonly used in functions, arrays, and objects.

Usage in Functions:

The rest operator is used to gather all remaining arguments into an array.

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

Usage in Arrays:

It collects the remaining elements of an array into a new array.

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

Usage in Objects:

The rest operator collects remaining properties into a new object.

const person = { name: "Alice", age: 25, country: "Wonderland" };
const { name, ...details } = person;
console.log(name); // Output: Alice
console.log(details); // Output: { age: 25, country: 'Wonderland' }

---

2. The Spread Operator

The spread operator expands an array or object into individual elements or properties. It is particularly useful for copying and merging arrays or objects.

Usage in Arrays:

1. Expanding Arrays:

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

2. Combining Arrays:

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

3. Copying Arrays:

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

Usage in Objects:

1. Expanding Objects:

const person = { name: "Alice", age: 25 };
const clone = { ...person };
console.log(clone); // Output: { name: 'Alice', age: 25 }

2. Merging Objects:

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

---

3. Key Differences Between Rest and Spread

Aspect	Rest Operator	Spread Operator
Purpose	Collects multiple elements into one	Expands elements into individual pieces
Usage Context	Function parameters, array destructuring	Arrays, objects, and function arguments
Syntax	Appears on the left side of =	Appears on the right side of =

---

4. Examples

Rest with Functions:

function greet(greeting, ...names) {
  return `${greeting}, ${names.join(" and ")}`;
}
console.log(greet("Hello", "Alice", "Bob")); // Output: Hello, Alice and Bob

Spread with Function Calls:

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

Combining Both:

function add(a, b, ...rest) {
  const sumRest = rest.reduce((total, num) => total + num, 0);
  return a + b + sumRest;
}
console.log(add(1, 2, 3, 4)); // Output: 10

---

5. Use Cases

• Rest Operator:

  • Handling variable-length arguments in functions.
  • Collecting remaining properties during destructuring.

• Spread Operator:

  • Cloning and merging arrays or objects.
  • Passing array elements as arguments to functions.

---

Conclusion

The rest and spread operators enhance the flexibility and readability of JavaScript code. While the rest operator is great for gathering values, the spread operator is ideal for spreading or copying them. Together, they simplify many common coding tasks.