How to Destructure a Nested Property or Object in JavaScript

In modern JavaScript with ES5 and ES6 features, one of the big things is destructuring objects and arrays. You can easily destructure object properties to make new variables but when it comes to destructuring a nested property, it’s a little tricky. This article explains how to destructure a nested property or an object.

Destructuring a Nested Object from Another Object

Let’s assume you have a user’s data with name, age, and address where the address is another object with street number and house number properties. You need to destructure the address which is a nested object. The following code snippet destructures a nested object.

Destructuring a Nested Property from A Nested Object

What if you want to access streetNo property, not the entire object? There may be situations where you need only some properties of a nested object. The following code example just destructures the  streetNo not the entire address object.

Please note that in the above example, address is null because the address is not destructured.


There are uses cases where you need to destructure just a few properties from a nested object. You can destructure the nested object as well as just a few properties from the nested object with address: {street}, syntax. You can read more about object destructuring on Mozzila documentation.

Latest articles

Related articles