We used to write codes in the old days:

var building = { blocks: 10,

color: 'red' }

var blocks = building.blocks

var color = building.color

Nothing wrong with that but we have 2 same words for blocks and color, that’s duplication. With Destructing you can do it with one line using object destructing:

const { blocks, color } = building

blocks will equal to 10 and the color is red.

Destructing works in array as well. If you use { } it will grab the property ; you can use the [ ] and it will grab the item by position.

const brands = ["apple","microsoft","samsung"] const [ apple ] = brands console.log(apple) // apple

The second line of above code used [ ], grabbing the first item thus we can get ‘apple’. It’s equal of doing brands[0].

Using Destructing for objects and arrays together

I’m not sure is there any valid usage for mixing both object destruction and array destruction in real world application, but it’s possible.

const people = [{

name: 'James',

age: 20

}, {

name: 'John',

age: 25

}]

Above is an people array of object, how we get the age of Jame ? We may do

var age_of_james = people[0].age

We actually can do this in ES6

const [ { age } ] = people

console.log(age) //20

What the code above does is, first get the first array, then find the age property.

Let’s try another example:

const Google = { location: ["San Francisco", "Mountain view", "New york" }

To get San Francisco, we can do

const { location: [ sf_google ] } = Google

console.log(sf_google) //San Francisco

You might as what if I want to skip the array? To get Mountain View you can use comma