How does object destructuring extract properties into variables?

Write an object pattern inside braces on the left of a declaration. By default, each property name maps to a variable with that same name. For example:

const user = { id: 42, name: "Mina" };
const { id, name } = user;

After this, id is 42 and name is "Mina". The variable names come from the property names in the destructuring pattern, not from the values. You can include only the properties you want to extract. [S1]

Use a colon to pair the property name on the left with your chosen variable name on the right:

const { name: displayName } = user;

This reads user.name into displayName; it does not declare a variable named name from that pattern. You can mix direct extraction and aliases:

const { id, name: displayName } = user;

With the example object above, id is 42 and displayName is "Mina". Read name: displayName as “take the name property and assign it to displayName.” [S1]

Put = fallback after the variable name in the pattern. The default is used if the property is missing or its value is undefined; it is not used for null. [S1]

const settings = { theme: undefined, volume: null };
const { theme = "light", volume = 50, language = "en" } = settings;

The resulting values are theme === "light", volume === null, and language === "en". The default therefore cannot distinguish a missing property from an existing property whose value is undefined: both produce the default. If that distinction matters, separately check whether the object owns the property, for example with Object.hasOwn(settings, "theme"). Destructuring alone does not make that distinction. [S1]

Here is a worked example combining direct extraction, an alias, and defaults:

const profile = {
  id: 7,
  name: "Ari",
  nickname: undefined,
  note: null,
};

const {
  id,
  name: displayName,
  nickname = "Guest",
  language = "en",
  note = "No note",
} = profile;

The resulting values are id: 7, displayName: "Ari", nickname: "Guest", language: "en", and note: null. The undefined nickname and absent language property use their defaults, while null remains null. [S1]

To read a pattern, identify the source property, the variable receiving it, and any default. In name: displayName, the source property is name and the variable is displayName. In nickname = "Guest", the property and variable share a name, and the default applies when the accessed value is undefined. These examples assume the declared variable names are available in the surrounding scope.