DEV Community

3 Powerful Examples of Destructuring Assignment

Laurie on June 11, 2019

ECMAScript is always adding new features that make our code more powerful. I even started a discussion about people's favorites. ...

Read full post

Michael Z • Jun 11 '19

There is one more use case to destruct dynamically. Also resting!

let { [key]: id = 0, ...rest } = obj

I have written an article on it here: dev.to/mzanggl/let--key-id--0-rest...

Laurie • Jun 11 '19

Awesome!

kip • Jun 11 '19 • Edited

The first example of Array destructuring isn't a valid array, close the object:

[
  {
    data: {
      item: "this thing"
    },
  },
  ...
]

Destructuring is good for readability.

Laurie • Jun 11 '19

Oops, this is what I get for typing directly in the article! I’ll make that fix.

kip • Jun 11 '19 • Edited

In the array above you could:

const [{ data }, { status }] = [
  {
    data: {
      item: "this thing"
    },
  },
  {
    status: {
      num: 200
    }
  }
]

Laurie • Jun 11 '19

Yup! And that’s similar to the promise.all example.

anpos231 • Jun 11 '19 • Edited

You can also pass default values in case the property is not there:

({data: {item = 'I am default'} = {}} = {}) => {
   item
}

Laurie • Jun 11 '19

Great addition!

Brad • Jun 11 '19

When I first started to learn destructuring I was very confused. Once I realized it was more like "back-ward assignment" I figured it out. Now I love using it!

Destructuring for the win!

Laurie • Jun 11 '19

I think of it like diving in a level deeper. You use bracket types depending on what type of data structure you’re trying to dive into.

Love that you love it now!

Various • Aug 20 '19

Nice, learned a new trick from this :)

Fellipe Geraldo Pereira Botelho • Jun 17 '19

Awesome!

nirmalpatel59 • Jun 14 '19

excellent

Reynaldo Josué Cano Bárcenas • Jun 11 '19

Great information, I recently started learning ES2015 +, and destructuring is confusing for me. Thank you.

Laurie • Jun 11 '19

So glad it was helpful!

Alejandro López • Jun 12 '19 • Edited

You can also set an alias to what you're destructuring!

const person = {
  name: 'John',
  lastName: 'Smith'
}

const { lastName: alias } = person

console.log(alias) // 'Smith'

Laurie • Jun 12 '19

Definitely! It's in that last example as well :)