Destructuring

Destructuring is a convenient way of extracting multiple values from data stored in objects and Arrays. The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Ex:- var a = [10, 20, 30];

[x, y, z] = a;
console.log(x) // 10
console.log(y) // 20
console.log(z) // 30

Left-hand side of the assignment to define what values to unpack from the sourced variable.

Array Destructuring

When destructuring Array, we use their index/positions in the assignment.

Array Destructuring

Array Passing to a Function

Array Returning from a Function

Nested Array Destructuring

Object Destructuring

When destructuring objects, we use the keys as variable names. This is how JavaScript knows which property of the object we want to assign.

Object Destructuring

Object Destructuring

Object Destructuring

Object Passing to a Function

Object Returning from a Function

Nested Object Destructuring