JavaScript - Nested Destructuring

Nested Destructuring

TheNested Destructuringin JavaScript allows us to extract data fromnestedobjects and arrays. An object (or array) can contain another object (or array) inside itself, known as a nested object (or array). Unpacking the nested objects or arrays is called nested destructuring. We can extract all or some data from the objects or arrays using destructuring.

We can assign the extracted data from nested array or object to the variables. This is referred asnested destructuring assignment. When using nested destructuring to get some values from a nested array or object, you have to follow the structure of the array or object.

Nested Object Destructuring

This section will demonstrate nested object destructuring in JavaScript.

Syntax

The syntax of nested object destruction in JavaScript is as follows −

const {prop1, prop2: {nestedprop1, nestedprop2}} = obj;

In the above syntax,prop1is a property of the object, and theprop2property contains the nested object, havingnestedprop1andnestedprop2properties.

Example

In the example below, the car object contains the brand, model, and info properties. The info property contains the nested object containing the price and color properties.

We have destructured the nested object and printed the values of the variables in the output.

Output

Brand: Hyundai
Model: Verna
Price: 1200000
Color: white

Example: Nested object destructuring and renaming variables

The below code demonstrates that you can rename the variables while unpacking the nested object properties.

We have renamed the brand, model, price, and color variables to company, name, cost, and carColor.

Output

Company: Hyundai, Name: Verna, Cost: 1200000, Color: white

Example: Nested object destructuring and default values

You can use the assignment operator to assign the default values to the variables. Whenever particular property of the object is undefined, it initializes the variable with the default value.

Here, we have renamed each variable and assigned default values. The ‘science’ property is not defined in the grades (nested object) object. So, the code prints its default value in the output.

Output

Name: Sam
Surname: Raina
English: 75
Science: 0

Example: Nested object destructuring and rest operator

The rest operator allows you to collect the remaining properties into a single object.

In the below code, the grades object contains 4 different properties. We have stored the value of the Maths property in the Maths variables and other properties in the ‘allGrades’ variable using the rest operator. The ‘allGrades’ is an object containing 3 properties.

Output

firstName: Kunal
lastName: Karma
Maths: 87
allGrades: {"English":75,"SocialScience":90,"Science":80}

Nested Array Destructuring

This section will demonstrate nested array destructuring in JavaScript.

Syntax

The syntax to unpack nested array elements (nested array destructuring) in JavaScript is as follows −

const [a, [b, c], d] = arr;

In the above syntax, we store the nested array elements in the b and c variables.

Example

In the below code, the arr array contains the nested array. We unpack the nested array elements into the variables b and c. In the output, you can observe the values of the b and c variables.

Output

a = 10, b = 15, c = 20, d = 30

Example: Skipping elements of the nested array

Assignment destructuring allows you to skip the elements of the nested array. Here, the arr array contains two nested arrays. We skip the first element of each nested array while destructuring the nested array.

Output

a = 2, b = 4, c = 10

Example: Nested array destructuring and default values

You can assign default values to the variables like objects while destructuring the nested arrays.

Here, the first nested array of arr [3, 4] contains two elements. While destructuring, we skipped the first two elements and used the variable p to get the third element, but the nested array contains only two elements. So, the value of the variable p is a 29 default value.

Output

p = 29, q = 10

Example: Nested array destructuring and rest operator

You can use the rest operator with nested array destructuring. Here, variable b stores the remaining elements of the first nested array, and variable c stores the remaining elements of the parent array, which includes the second nested array and last array element.

Output

a = 6
b = 7,8,9
c = 10,11,12,13,14

Array Within Object Nested Destructuring

Sometimes, we need to destructure the object containing the array. Let’s understand it via the example below.

Example

In the example below, the num2 property of the numbers object contains the array. We destructure the object properties and print the values in the output.

Output

num1 = 10, a = 40, b = 6, c = 5

Object Within Array Nested Destructuring

In some cases, an array can also contain the object, and you need to destructure the object from the array.

Example

In the below code, the numbers array contains the object containing the p and q properties.

After that, we destructure the array and unpack the object properties.

Output

a = 10, p = 20, q = 30