Object Destructuring

When working with large objects, writing user.profile.email or user.id repeatedly gets tedious. JavaScript provides a powerful shorthand called destructuring assignment to cleanly unpack properties from objects directly into distinct variables.

Instead of declaring variables line by line, you can extract multiple properties at once using curly braces {}.

const user = { id: 42, username: 'jdoe' };
const { id, username } = user;
console.log(id);
console.log(username);

42
jdoe

Order Does Not Matter

A common misconception is that the variables in your destructuring block must be listed in the exact same order as the properties in the object. This is false!

While array destructuring relies on position, object destructuring strictly matches by the property name. The order you list them inside the curly braces is completely irrelevant.

const user = { id: 42, username: 'jdoe' };
const { username, id } = user;
console.log(username);
console.log(id);

jdoe
42

Visualizing the Memory Map

Let’s watch exactly how the JavaScript engine maps the properties from the object heap into your local execution context.

const config = { theme: 'dark', size: 'large' };
const { theme } = config;

Renaming Variables

Sometimes the property name in the object conflicts with a variable you already have, or it just isn’t descriptive enough. You can assign an unpacked property to a completely new variable name using a colon :.

Think of it as reading "unpack the name property, and assign it to fullName".

const user = { name: 'Alice' };
const { name: fullName } = user;
console.log(fullName);

Alice

Default Values

If you attempt to destructure a property that doesn’t exist, JavaScript won’t crash—it will just assign undefined to your variable. To prevent this, you can safely provide fallback default values using the = operator.

const user = { name: 'Alice' };
const { role = 'guest' } = user;
console.log(role);

guest

Nested Destructuring

Objects are frequently nested. You can mirror the exact structure of the object in your destructuring assignment to reach deep inside and extract specific values in a single line.

const user = { profile: { email: '[email protected]' } };
const { profile: { email } } = user;
console.log(email);

[email protected]

The Null Trap

While destructuring is incredibly convenient, there is one fatal trap you must watch out for. What do you think happens if you try to destructure an object that is currently null or undefined?

const user = null;
try {
  const { id } = user;
} catch (e) {
  console.log(e.name);
}

TypeError

Attempting to destructure null or undefined throws a TypeError immediately. This happens before any default values are even considered! Always ensure the parent object actually exists before attempting to destructure it.