JavaScript Destructuring

Destructuring extracts values from objects and iterables into variables using concise binding syntax. It can also be used in assignments, function parameters, and with default values or renamed properties.

Object destructuring reads properties by name and binds their values to variables. You can rename a binding with syntax such as `const { name: userName } = user`; the property is still called `name`, while the local variable is `userName`.

Array destructuring works by iterable position rather than property name. For example, `const [first, second] = items` assigns the first two yielded values to the corresponding variables, and you can skip positions with empty slots such as `const [, second] = items`.

Destructuring supports default values when the extracted value is `undefined`. Defaults can also be combined with renaming, nesting, and rest syntax. Object rest collects remaining enumerable own properties, while array rest collects remaining iterable values.

The same patterns can appear in function parameters, which is especially useful when a function accepts an options object. Destructuring does not copy an object into independent nested structures; extracted object or array values retain their existing references.

Key points

• Object destructuring matches property names; array destructuring matches iterable order.
• Bindings can be renamed, given defaults, nested, or collected with rest syntax.
• Defaults are used when the corresponding value is `undefined`, not merely because it is falsy.
• Destructuring can appear in declarations, assignments, and function parameters.
• Array destructuring operates on iterables, not specifically on arrays.

Interview questions

How do default values work in destructuring?

A destructuring default is used when the extracted value is `undefined`. It does not replace values such as `null`, `false`, `0`, or an empty string. Defaults can be used in both object and array patterns and can be combined with renamed object properties. This distinction matters when handling optional configuration values.

What is destructuring in JavaScript, and why is it useful?

Destructuring is syntax for extracting values from objects or iterables into bindings. Object destructuring selects properties by key, while array destructuring follows iterable order. It reduces repetitive property access and makes function parameters and local assignments more concise. It can also combine renaming, defaults, nested patterns, and rest elements.

What is the difference between object and array destructuring?

Object destructuring matches named properties, so the order of properties in the pattern does not determine which values are selected. Array destructuring consumes an iterable sequentially, so positions matter. Object patterns can use property renaming, while array patterns can skip positions with empty slots. Both support defaults and rest syntax.

What does the rest syntax do in destructuring?

In an object pattern, rest collects the remaining enumerable own properties that were not otherwise selected. In an array pattern, rest collects the remaining values from the iterable into a new array. Rest must appear at the end of its corresponding pattern. It is useful when a function needs a few known fields while preserving the remaining data.

How can destructuring be used in function parameters?

A function parameter can contain an object or array destructuring pattern, allowing the function to bind only the inputs it needs. This is common for options objects because callers can provide named arguments without relying on positional order. Defaults can be placed on the parameter itself or on individual destructured properties. If the whole object parameter might be omitted, a parameter default such as `function f({ x } = {})` can prevent destructuring `undefined`.