Lesson 13 of 80

Destructuring

Q: How does object destructuring differ from array destructuring, and when do default values actually apply?

A strong answer covers: Object destructuring matches by key name (order-independent); array destructuring matches by position (order-dependent); Defaults apply only when the matched value is strictly undefined, not for any other falsy value; Destructuring a property from null or undefined throws a TypeError, since there's nothing to read a property from.

Pulling values out of arrays and objects by matching a pattern, instead of reaching in with indexes and dot-paths one at a time.

10 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 2

Given `const { count = 5 } = { count: 0 };`, what is `count`?

0 — the default only applies when the property is undefined5 — 0 is falsy, so the default takes overundefined, because count wasn't explicitly set to a default-eligible value

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Destructuring

What interviewers actually ask about this, and what a strong answer has to cover.

How does object destructuring differ from array destructuring, and when do default values actually apply?

A strong answer covers

Object destructuring matches by key name (order-independent); array destructuring matches by position (order-dependent)
Defaults apply only when the matched value is strictly undefined, not for any other falsy value
Destructuring a property from null or undefined throws a TypeError, since there's nothing to read a property from

Likely follow-ups

How would you destructure a function parameter safely if the whole argument might be omitted?
How does renaming combine with a default — what does `{ name: userName = 'Anonymous' }` actually do?
How does destructuring relate to how React components typically receive props?

Practice these with the AI interviewer →

The plain-language idea

Destructuring lets you unpack values from an array or object straight into variables by writing a pattern that mirrors the shape you're pulling from.

const user = { name: "Ada", address: { city: "London" } };
const { name, address: { city } } = user;
// name -> "Ada", city -> "London"

const [first, , third] = [10, 20, 30];
// first -> 10, third -> 30 (the middle slot is skipped)

function greet({ name, greeting = "Hi" }) {
  return `${greeting}, ${name}`;
}

Object destructuring matches by key name (order doesn't matter); array destructuring matches by position (order is everything). Both support default values for when the source is undefined, and both can rename: const { name: userName } = user.

Destructuring: the pattern mirrors the shapeStep 1 of 4

const user = { name: 'Ada', address: { city: 'London' } } — the real object.

What people usually miss

Watch out

Defaults only trigger on undefined, not on other falsy values — const { count = 5 } = { count: 0 } gives you 0, not 5, because 0 isn't undefined.
Destructuring null or undefined throws. const { x } = null is a TypeError — there's nothing to read a property from. Guard with a default parameter (= {}) if the source might be missing.
Renaming and defaults combine: const { name: userName = "Anonymous" } = user reads user.name, calls it userName locally, and falls back to "Anonymous" if user.name is undefined.

Why this matters in interviews

Destructuring shows up constantly in real code review and in "what does this log" snippets involving defaults, renaming, and nested patterns — it's less a standalone topic than a fluency check on reading everyday modern JS.