Detailed explanation
Destructuring is JavaScript syntax for extracting values from arrays or properties from objects and assigning them to variables. It makes common access patterns shorter and shows which values your code needs. For example, const { name, city = 'NA' } = user; creates variables named name and city from user.name and user.city. Destructuring does not remove values from the source or clone the extracted data. If an extracted value is an object, the variable still refers to that same object.
Object destructuring matches property names, regardless of their order. You can rename a variable with const { name: userName } = user;, which reads the name property into userName without declaring a name variable. Array destructuring matches positions: const [first, ...rest] = [1, 2, 3]; gives first the value 1 and rest a new array containing [2, 3]. You can skip positions using commas, as in const [, second] = values;. Under the hood, array destructuring uses the iterable protocol, so it also works with strings and sets, not just arrays. Object destructuring instead performs property access.
Defaults apply only when an extracted value is undefined, including when a property or array position is missing; they do not replace null, false, 0, or an empty string. Nested patterns extract deeper values: const { opts: { deep } } = config; creates deep, not opts. However, this throws if opts is null or undefined. Using opts: { deep } = {} handles an undefined opts, but not null. Rest syntax collects remaining values or properties and must appear last in its pattern.
Destructuring is useful in function parameters, especially when a function accepts an options object. For example, function f({ id, opts: { deep } = {} } = {}) {} supports an omitted argument and an omitted opts property. Interviewers usually check whether you understand name-based versus position-based extraction, defaults, and missing nested data rather than just the syntax. Named imports look similar, but import { x } from './module.js' uses module import syntax, not object destructuring.
Key points to remember
- Object patterns select properties by name; array patterns consume iterable values by position.
- Defaults are used only for undefined values, not null or other falsy values.
- Renaming uses property: variable, while nested patterns extract deeper values.
- Rest collects remaining elements or own enumerable properties and must come last.
- Destructuring creates bindings or assigns existing variables; it does not deep-copy data.
Common mistakes candidates make
- Assuming a default replaces null, false, 0, or an empty string.
- Destructuring nested properties without handling undefined or null intermediate values.
- Treating named imports as object destructuring because both use braces.
Likely follow-up questions
Can destructuring assign values to existing variables?
Yes: let a, b; [a, b] = [10, 20]; assigns existing variables. An object assignment used as a standalone statement needs parentheses, such as ({ name } = user), so the braces are not interpreted as a block.
What is the difference between rest and spread?
Rest collects remaining values into a variable, as in const [first, ...others] = items;. Spread expands values into another expression, as in const copy = [...items];.
How can you safely destructure an object that might be null or undefined?
Use a fallback such as const { name = 'Guest' } = user ?? {};. This handles a null or undefined user, but a name property explicitly set to null still remains null.
Interview tip: Start with the definition, show one object and one array example, then mention that defaults apply only to undefined.