Destructuring nested Object and Array in javascript

A Destructuring javascript expression makes it possible to unpack values from arrays or properties from objects into distinct variables.

var person = {
  firstName : 'san',
  lastName : 'bhu'
};

//if you want to unpack firstName and lastName in separate variable
var { firstName, lastName } = person;
console.log(`First Name : ${firstName}, Last Name : ${lastName}`);

//In order to assign different variable name
var { firstName : firstNameChanged, lastName : lastNameChanged } = person;
console.log(`First Name Changed : ${firstNameChanged}, 

Last Name Changed : ${lastNameChanged}`);

//Assigning a default value Destructuring too.
var { 

firstName : firstNameD = 'First Name' , 

lastName : lastNameD = 'Last Name', 

isEmployedD = true } = person;
console.log(`First Name : ${firstNameD}, 

Last Name : ${lastNameD},

 is employed : ${isEmployedD}`);

//Nested Object
var student = {
  firstName : 'San',
  lastName : 'bhu',
  department : {
    departName : 'Computer Science',
    address : {
      city : 'San Diego',
      country : 'USA',
      language : {
        EN : 'English',
        FR : 'French'
      }
    }
  }
};

//To retrive a first level properties it is easy, 

//to destruct departName
var { department : { departName } } = student;
console.log(`Department Name : ${departName}`);

//In order to retrive city
var { department : { address : { city } } } = student;
console.log(`Department City : ${city}`);

//Same way you can retrieve any nested porperties.


//Same thing can be done for array but insted {} use [].
var names = [ 'san bhu', 'top kerry'];
var [first, second ] = names;
console.log(`Names, first : ${first}, second : ${second}`);

//For array you can use Rest operator to collect remaining arrays.
var rollNames = ['san', 'bam', 'tam', 'lam' ];
var [ firstBoy, ...restOfBoys ] = rollNames;
console.log(`First Boy : ${firstBoy}, rests : ${restOfBoys.map((boy) => boy)}`);

//You can also ignore
var [ firstBoyFirst, , thirdBoyThird ] = rollNames;
console.log(`First Boy : ${firstBoyFirst}, Third Boy : ${thirdBoyThird}`);

Reference :

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment