All topics
43 / 100
Objectsbeginner

Object Destructuring

Extracting properties from objects into individual variables using a concise pattern-matching syntax, including renaming, defaults, and nested patterns.

Destructuring pulls properties out of an object into variables, matching by name.

Destructuring is like using a labeled cookie cutter on a big sheet of dough — instead of trimming out each variable's exact shape by hand, you press one pattern into the object and lift out however many named pieces you asked for, all in one motion.

Key Concepts

1
    const { name, age } = user;
2
    const { name: userName } = user;          // rename
    const { role = 'guest' } = user;          // default
    const { address: { city } = {} } = user;  // nested, guarded
    const { id, ...rest } = user;             // rest
3
Defaults apply only to undefined, not to null or '' — the same rule as default parameters.
undefinednull''
4
In function parameters it replaces the options object dance.
    function connect({ host = 'localhost', port = 5432, ssl = false } = {}) {
      ...
    }
5
    connect();                       // all defaults
    connect({ port: 5433 });         // one override
6
The = {} at the end is essential. Without it, calling with no argument destructures undefined and throws, which is the most common mistake here.
= {}undefined
7
Arrays destructure by position.
    const [first, second = 0, ...others] = arr;
    const [, , third] = arr;                  // skip with commas
    [a, b] = [b, a];                          // swap
8
The parenthesis rule. Assigning to existing variables needs parentheses, because a line starting with { is read as a block:
{
9
    ({ name, age } = user);        // required
10
Where it earns its place.
    // React
    const { data, isLoading, error } = useQuery(...);
    function Card({ title, children }) { }
11
    // imports
    const { readFile } = require('fs/promises');
12
    // iterating entries
    for (const [key, value] of Object.entries(obj)) { }
13
Two cautions.Deep destructuring fails on missing intermediates.
14
    const { a: { b } } = {};     // TypeError
15
Guard each level with a default, or use optional chaining instead — which is usually clearer.
16
Too much at once hurts readability.
17
    const { a: { b: [, { c: renamed = 1 }] } } = obj;
18
Technically valid and effectively unreadable. Two plain statements are better.
19
What the interviewer is probing.1. "How do you rename while destructuring?" Probing: the syntax. Stalls: "You cannot." Moves up: const { a: b } = obj, which binds the value of a to b.
20
2. "What happens destructuring a missing nested object?" Probing: the failure mode. Stalls: "You get undefined." Moves up: it throws, because you are reading a property of undefined; give the intermediate level a default of {}.
21
3. "When does a default apply?" Probing: the trigger. Stalls: "For falsy values." *Moves up:* only for undefined, so null is passed through.
22
4. "How do you destructure in a function signature?" Probing: the practical use. Stalls: "You cannot." Moves up: destructure the parameter directly with a default of {} so calling with no arguments does not throw.
Use cases:destructuringes6syntax