Rediscovering JavaScript: ES6, ES7 & ES8/

...

/

Object Destructuring: Deep Destructuring, and Collisions

Object Destructuring: Deep Destructuring, and Collisions

Understand the concepts of deep destructuring, dealing with collisions, and extracting into existing variables using object destructuring.

We'll cover the following...

Deep destructuring

In the previous lessons on object destructuring, we extracted the top-level properties of objects. The destructuring syntax makes it easy to extract properties in lower levels and even embedded objects.

Let’s extract the street property of the address embedded object in sam.

Press + to interact
'use strict';
//START:OBJECT
const weight = 'WeightKG';
const sam = {
  name: 'Sam',
  age: 2,
  height: 110,
  address: { street: '404 Missing St.'},
  shipping: { street: '500 NoName St.'},
  [weight]: 15,
  [Symbol.for('favoriteColor')]: 'Orange',
};
//END:OBJECT
//START:NESTED
const { name, address: { street } } = sam;
//END:NESTED
console.log(street);
try {
  console.log(address);
} catch(ex) {
  console.log(ex.message);
}

As you have seen, the name property, which is a top-level property, is extracted. In addition, the street property, which is nested within the address property is extracted. Use caution: this syntax defines only two variables, name and street. It does not define the ...