Spread vs Rest Operators in JavaScript

---

What is the Spread Operator?

The spread operator (...) expands — it takes an array or object and spreads its items out into individual pieces.

Think of it like opening a bag of chips and pouring them all out onto a plate. Each chip becomes separate.

Simple rule: Spread = expanding many things out of one container.

const fruits = ["apple", "banana", "mango"];

// Spread expands the array into individual items
console.log(...fruits);
// Output: apple banana mango

// Adding items to a new array
const moreFruits = ["cherry", ...fruits, "grape"];
console.log(moreFruits);
// Output: ["cherry", "apple", "banana", "mango", "grape"]

SPREAD: ONE ARRAY → INDIVIDUAL ITEMS

---

What is the Rest Operator?

The rest operator (...) collects — it gathers multiple values together into one array.

Think of it like a shopping bag that collects all the items you throw in.

Simple rule: Rest = collecting many items into one array.

// Rest collects all arguments into one array
function addAll(...numbers) {
  return numbers.reduce((sum, n) => sum + n, 0);
}

console.log(addAll(1, 2, 3, 4, 5));
// Output: 15

// numbers = [1, 2, 3, 4, 5] → all collected into one array

REST: INDIVIDUAL VALUES → ONE ARRAY

---

Using Spread with Arrays and Objects

With Arrays

JAVASCRIPT — ARRAYS

const a = [1, 2, 3];
const b = [4, 5, 6];

// Merge two arrays
const merged = [...a, ...b];
// [1, 2, 3, 4, 5, 6]

// Copy an array (not a reference!)
const copy = [...a];
// [1, 2, 3] — a new array, safe to modify

// Pass array items as function arguments
const nums = [10, 30, 20];
Math.max(...nums); // 30

With Objects

JAVASCRIPT — OBJECTS

const user = { name: "Alice", age: 25 };
const extra = { city: "Mumbai", job: "Dev" };

// Merge objects
const fullUser = { ...user, ...extra };
// { name: "Alice", age: 25, city: "Mumbai", job: "Dev" }

// Update one property without changing the original
const updatedUser = { ...user, age: 26 };
// { name: "Alice", age: 26 }

Using Rest in Destructuring

JAVASCRIPT — REST IN DESTRUCTURING

const [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first);  // 10
console.log(second); // 20
console.log(rest);   // [30, 40, 50]

// Same works for objects
const { name, ...others } = { name: "Alice", age: 25, city: "Mumbai" };
console.log(name);   // "Alice"
console.log(others); // { age: 25, city: "Mumbai" }

---

Happy Coding!