… Spreads Arrays and Objects
concat() is old. Object.assign() is verbose. Spread operator (…) spreads elements. Merge arrays, clone objects, convert to array.
❌ Old Way
const combined = arr1.concat(arr2);
const copy = Object.assign({}, obj);
const args = Array.prototype.slice.call(arguments);
✅ Spread Operator
const combined = [...arr1, ...arr2];
const copy = { ...obj };
const args = [...arguments];
🎯 Advanced Spread
// Array operations
const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = [...first, ...second];
const copy = [...first];
const withMiddle = [...first, 99, ...second];
// Object operations
const user = { name: 'Alice', age: 30 };
const address = { city: 'NYC', country: 'USA' };
const full = { ...user, ...address };
const updated = { ...user, age: 31 };
const { age, ...rest } = user; // rest operator
// Function calls
const numbers = [1, 2, 3, 4, 5];
Math.max(...numbers);
// Convert NodeList to array
const divs = [...document.querySelectorAll('div')];
💡 Immutability
- Spread creates shallow copy (nested objects still referenced)
- Use for immutable updates (React state, Redux)
- Combine with rest operator for destructuring
- Works with any iterable (strings, maps, sets)
“concat() and Object.assign() are verbose. Spread operator is elegant. My React code uses spread everywhere. Cleaner, fewer bugs.”