Spread Operator (...) and Rest Parameters (...)

Spread Operator (...): 🧠 Main idea: Spread expands an iterable (like an array or object) into individual elements.

Example 1: Expanding an array

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

Example 2: Copying an array

javascript
1const original = [1, 2, 3];
2const copy = [...original];

copy is now a new array with the same elements.

Example 3: Merging arrays

javascript
1const arr1 = [1, 2];
2const arr2 = [3, 4];
3const merged = [...arr1, ...arr2];  // [1, 2, 3, 4]

Example 4: Expanding objects

javascript
1const obj1 = { a: 1 };
2const obj2 = { b: 2 };
3const mergedObj = { ...obj1, ...obj2 };
4// { a: 1, b: 2 }

Rest Parameters (...): 🧠 Main idea: Rest collects a bunch of values into a single array.

Example 1: Collecting function arguments

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

numbers is an array: [1, 2, 3, 4].

Example 2: Destructuring with rest

javascript
1const [first, ...rest] = [10, 20, 30, 40];
2console.log(first); // 10
3console.log(rest);  // [20, 30, 40]

Visual Summary:

Operation	Purpose	Behavior
Spread	Expand	Breaks items out
Rest	Collect	Gathers items together

Simple way to remember: "Spread = break it apart. Rest = gather it together."

In short: Spread (...): Explodes values out into individual items. Rest (...): Collects multiple items into one array.