JAVASCRIPT

nested destructuring javascript

const a = {
  id: 1,
  name: 'Yogesh',
  age: 30,
  education: {
    degree: 'Bachelor'
  }
};
const {education: {degree}} = a;
console.log(degree); //prints: Bachelor

How to destructuring nested object value in javascript?

const person = {
    firstName: 'Adil',
    lastName: 'Arif',
    age: 25,
    job: 'web-developer',
    love: 'coding',
    friedsList: {
        friend1: 'Abir',
        friend2: 'Adnan'
    }
}
const { friend1, friend2 } = person.friedsList;
console.log(friend1, friend2);
//Expected output: Abir Adnan

es6 parameter destructuring nested object

const myFunc = ({event: {target: {name,secondName}}}) => {
  console.log(name);
  console.log(secondName);
}

myFunc({event: {target: {name: 'fred'}}})

Nested destructuring in Javascript

const person = {
    id: 0133,
    name: "Robert",
    positon: "web-developer",
    salary: 8000,
    pColor: "red",
    pSports: "football",
    pMovies: ["word war 1", "destroy the world", "long way", "Where is my home"],
    pChild: {
        firstChild: "Adiba",
        secondChild: "Alvi"
    }
}
const { secondChild } = person.pChild;
console.log(secondChild);
//Output: Alvi

JavaScript nested destructuring

// Destructuring an object > array > object structure
const returnedObject = {
  docsArray: [
    {socketRoom: '', routes: []},
    {socketRoom: '', routes: []},
    {socketRoom: '', routes: []},
  ]
}

// this will destructure the first and second elements from docsArray, and spread the remainder
const {docsArray: [element0, element1, ...remainder]} = returnedObject

// taking this further with destructing properties from element0 
const {docsArray: [{socketRoom0, routes0} = element0, {socketRoom1, routes1} = element1]} = returnedObject

// note the syntax for destructing Objects and Arrays
const {propName} = Object
const [element0, element1] = Array

// then one layer deep where Object[propName] is an Array
const {propName: [element0]} = Object

// then two layers, where element0 is an Object
const {propName: [{propName} = element0]}

// three layers
const {propName: [{propName: [element00]} = element0]}

javascript Nested Destructuring Assignment

// nested array elements
const arrValue = ['one', ['two', 'three']];

// nested destructuring assignment in arrays
const [x, [y, z]] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

destructuring function nested parameters

let options = {
  title: 'My menu',
  items: ['item1', 'item2']
};

function showMenu({
  title = 'Untitled',
  width: w = 100,
  height: h = 200,
  items: [item1, item2] = ['something', 'esle'] // default whole array
  /*
  	items: [item1 = 'something', item2 = 'else']  // default items
  */
} = {} /* default empty obj if showMenu() doesn't get an argument */ ) {
  console.log(`${title} ${w} ${h}`);
  console.log(`${item1} and ${item2}`);
}

showMenu(options);