Spread Operator Patterns

Easy

The spread operator (...) expands iterables and objects. Essential for creating copies, combining data, and passing arguments. Creates shallow copies only.

Interactive Visualization

Destructuring

Old Way
const user = { name: "Alice", age: 25 };
const name = user.name;
const age = user.age;
Modern Way
Click transform to see

Key Points

  • Arrays: [...arr1, ...arr2]
  • Objects: {...obj1, ...obj2}
  • Calls: fn(...args)
  • Shallow copies
  • Later props overwrite

Code Examples

Array and Object Spread

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
// [1, 2, 3, 4]

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };
// { a: 1, b: 2 }

Spread creates shallow copies and merges data