Destructuring

ELI5 — The Vibe Check

Destructuring lets you unpack values from arrays or objects into variables in one clean line. Instead of writing 'const name = user.name; const age = user.age;' you write 'const { name, age } = user'. It's one of those features that makes modern JavaScript code feel like a different language compared to ES5.

Real Talk

Destructuring is an ES6 syntax for extracting values from arrays or properties from objects into distinct variables. Object destructuring can rename variables (const { name: firstName } = user), provide defaults ({ role = 'viewer' } = user), and nest (const { address: { city } } = user). Array destructuring is positional.

Show Me The Code

// Object destructuring
const { name, age, role = 'viewer' } = user

// Rename while destructuring
const { firstName: first, lastName: last } = person

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5]

// In function parameters
function render({ title, body, published = false }) {
  console.log(title, body, published)
}

When You'll Hear This

Destructuring function parameters makes APIs much more readable.,React's useState returns an array, which you destructure: const count, setCount = useState(0).,Swap two variables without a temp: a, b = b, a.