Spread vs Rest Operators in JavaScript

If you’ve ever seen ... in JavaScript and wondered what it does—you’re not alone. The same syntax is used for two different purposes : Spread operator → expands values Rest operator → collects values Understanding this difference is crucial for writing clean and modern JavaScript. 🧠 What Is the Spread Operator? The spread operator ( ... ) is used to expand elements from arrays or objects. Think: “Open the box and take everything out” 📦 Spread with Arrays ```js id="spread1" const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; console.log(arr2); // [1, 2, 3, 4, 5] 👉 It spreads elements individually. --- ### 📊 Visualization ```id="viz1" [1, 2, 3] ↓ ...arr ↓ 1, 2, 3 📦 Copying Arrays ```js id="spread2" const original = [1, 2, 3]; const copy = [...original]; ✔ Creates a shallow copy ✔ Avoids mutation --- ### 📦 Spread with Objects ```js id="spread3" const user = { name: "Rahul", age: 22 }; const updatedUser = { ...user, city: "Delhi" }; 🧠 What Is the Rest Operator? The rest operator ( ... )