Destructure Object Properties in JavaScript

The destructuring assignment syntax allows you to selectively extract properties from objects and assign them to distinct variables in a concise and structured way.

let { key, ..., keyN } = object;

Note: When destructuring a property that doesn't exist within the object, the specified variable will hold the undefined value.

Example

Let's consider this script:

const bike = {
  brand: 'Honda',
  model: 'Africa Twin'
};

const { brand, model } = bike;

console.log(brand);
console.log(model);

When executed, it will extract the brand and model properties of the bike object into two distinct variables of the same name, and output their values.

Which will produce this output:

Honda
Africa Twin

Rename destructured variables

In some cases, it may happen that the destructured variables collide with existing variables in the same scope.

To prevent this from happening, you can rename the destructured variables on the fly using the following syntax:

let { key: newKey } = object;

Example

Let's consider this script:

const bike = {
  brand: 'Honda',
  model: 'Africa Twin'
};

const { brand: bikeBrand, model: bikeModel } = bike;

console.log(bikeBrand);
console.log(bikeModel);

When executed, it will extract the brand and model properties of the bike object into two distinct variables respectively renamed bikeBrand and bikeModel, and output their values.

Which will produce this output:

Honda
Africa Twin

Define a default destructuring value

By default, destructing a property whose key doesn't exist in an object will result in an undefined value.

To specify a default fallback value, you can use the assignment operator as follows:

let { key = value } = object;

Note This syntax can be combined with the variable renaming syntax as follows:

let { key: newKey = value } = object;

Example

Let's consider this script:

const bike = {
  brand: 'Honda',
  model: 'Africa Twin'
};

const { brand, model, year = 2024 } = bike;

console.log(brand);
console.log(model);
console.log(year);

When executed, it will:

1. Extract the brand, model, and year properties of the bike object into three distinct variables.
2. Assign a default value to the year variable that would otherwise contain an undefined value.
3. Output their values

Which will produce this output:

Honda
Africa Twin
2024

Destructure nested properties

To extract nested properties, you can extend the destructing assignment syntax to mimic the object structure as follows:

let { key: { nestedKey } } = object;

Note: This will only destructure the nested key and not its parent keys.

Example

Let's consider this script:

const bike = {
  brand: "Honda",
  model: "Africa Twin",
  year: 2024,
  engine: {
    displacement: 1084,
    type: "4-stroke",
    starter: "electric"
  }
};

const { engine: { displacement } } = bike;

console.log(displacement);

When executed, it will extract the displacement property of the bike object into a distinct variable, but not the engine property and output its value.

Which will produce this output:

1084