Spread Operator

ELI5 — The Vibe Check

The spread operator (...) lets you unpack an array or object and spread its contents somewhere else. Need to copy an array? Spread it. Need to merge two objects? Spread them together. It's one of those features that once you know it, you use it constantly.

Real Talk

The spread operator (...) is an ES6 feature that expands iterables (arrays, strings) or objects into individual elements. For arrays, it enables cloning, concatenation, and passing array elements as function arguments. For objects (object spread, ES2018), it creates shallow copies and enables merging. It creates a new reference — spreading is a shallow copy.

Show Me The Code

// Array spread
const a = [1, 2, 3]
const b = [...a, 4, 5] // [1, 2, 3, 4, 5]

// Object spread (shallow copy + merge)
const user = { name: 'Alice', role: 'admin' }
const updatedUser = { ...user, role: 'viewer' }
// { name: 'Alice', role: 'viewer' }

// Spread as function args
const nums = [3, 1, 4, 1, 5]
Math.max(...nums) // 5

When You'll Hear This

Spread is the idiomatic way to update state in React (immutably).,Spread creates a shallow copy — nested objects are still shared references.,Rest syntax (...rest) is the 'opposite' — it collects remaining elements.