📤 JavaScript Spread Operator (...) Explained
Category: js / general-concepts
Difficulty: easy
The spread operator (...) in JavaScript is used to expand elements of an iterable (like an array or object) into individual elements. 📌 1. Expanding Arrays Example: Expanding an Array into Function Arguments [code example] ✅ The spread operator unpacks the array elements into separate arguments. Example: Combining Arrays [code example] ✅ Alternative to concat() , creating a new merged array. Example: Copying Arrays (Shallow Copy) [code example] ✅ Prevents accidental mutation by creating a new array instead of referencing the original. 📌 2. Using Spread with Objects Example: Merging Objects [code example] ✅ Alternative to Object.assign() , creating a new object. Example: Overwriting Object Properties [code example] ✅ The b property in objA is overwritten by b in objB. 📌 3. Spread vs Rest (...) Operator Spread (...) Expands elements Function calls, arrays, objects sum(...[1,2,3])→sum(1,2,3) Example: Spread vs Rest in Functions [code example] ✅ Spread "spreads out", Rest "gathers in". 📌 4. Practical Use Cases 1️⃣ Clone and Modify Objects [code example] ✅ Useful for immutable state updates (React, Redux, etc.). 2️⃣ Remove an Object Property [code example] ✅ Removes city from person without modifying the original object. 3️⃣ Convert a String into an Array [code example] ✅ Useful for string manipulation. 🚀 Summary Example sum(...[1,2,3]) [...arr1, ...arr2] [...original] { ...obj1, ...obj2 } { ...user, age: 30 } [..."Hello"] 💡 Final Thought: The spread operator (...) is one of JavaScript's most powerful tools for working with arrays, objects, and function arguments in a clean, concise way. <!-- quiz-start --> Q1: What does the spread operator do when used with an array? [ ] Combines arrays by reference [x] Expands array elements into individual elements [ ] Creates a deep copy of nested objects [ ] Removes duplicate elements Q2: What is the result of { ...{ a: 1, b: 2 }, ...{ b: 3, c: 4 } }? [ ] { a: 1, b: 2, c: 4 } [x] { a: 1, b: 3, c: 4 } [ ] { a: 1, b: [2, 3], c: ...