Destructuring nested object properties in JavaScript

Quick tutorial on how to use destructuring for accessing nested JavaScript object properties.

This is a really short article on an interesting JavaScript feature I wasn’t aware of long time: destructuring of nested object properties. Really helpful when you need to deal with only some properties of a heavily sub-structured object passed around, for example parts of a Redux state object in a React app.

Normal JavaScript object destructuring

First things first. Let’s assume you have the following JavaScript object.

const person = {
  name: 'John',
  address: {
    country: 'USA',
    city: 'New York',
    details: {
      street: 'Broadway',
      number: 3155
    }
  }
}

To only access the name property of the object when its passed over, you can use standard destructuring like so…

const writeName = ({ name }) => {
  console.log(name);
}

writeName(person);
// John

Naive approach to access nested properties using destructuring

But what when you need to access the city property of the object and only that? With standard destructuring the approach would look something like this.

const writeCity = ({ address }) => {
  console.log(address.city);
}

writeCity(person);
// New York

That’s defnitively working but there is an even more elegant approach to directly access the desired property instead of still need to step down one level using address.city.

Accessing nested object properties using deep destructuring

With using the following syntax for deep object destructuring, a direct extraction of the needed nested property is possible.

const writeCity = ({ address: { city } }) => {
  console.log(city);
}

writeCity(person);
// New York

That’s it! A really elegant way to access nested object properties. This is also working for deeper nested properties, just repeat the destructuring syntax using colons. The innermost of the destructuring will be available as local variables. Also you can of course destructure a list of properties, like so…

const writeAddressDetails = ({ address: { details: { street, number } } }) => {
  console.log(street);
  console.log(number);
}

writeAddressDetails(person);
// Broadway
// 3155

BTW: this is an official JavaScript feature also included in the JavaScript documentation for object destructuring. But it’s a bit hidden 😉

Putting it all together

const person = {
  name: 'John',
  address: {
    country: 'USA',
    city: 'New York',
    details: {
      street: 'Broadway',
      number: 3155
    }
  }
}

const writeName = ({ name }) => {
  console.log(name);
}

const writeCityLong = ({ address }) => {
  console.log(address.city);
}

const writeCity = ({ address: { city } }) => {
  console.log(city);
}

const writeAddressDetails = ({ address: { details: { street, number } } }) => {
  console.log(street);
  console.log(number);
}

writeName(person);
// John

writeCityLong(person);
// New York

writeCity(person);
// New York

writeAddressDetails(person);
// Broadway
// 3155

Happy coding 🙂

Useful links