DEV Community

loading...
Cover image for 3 Powerful Examples of Destructuring Assignment

3 Powerful Examples of Destructuring Assignment

laurieontech profile image Laurie Originally published at tenmilesquare.com ・2 min read

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

In there, I listed that mine was destructuring assignment. You can read more about it in the mozilla docs.

So without further ado, here are some great examples of this syntax in action!

Object Destructuring

Let's say we have an object we want to manipulate that looks like this:

{
  data: {
    item: "this thing"
  }
}
Enter fullscreen mode Exit fullscreen mode

If we pass it into a function and access item it's kind of messy.

(result) => {
   result.data.item
}
Enter fullscreen mode Exit fullscreen mode

With destructuring assignment, we can change it to this!

({data}) => {
   data.item
}
Enter fullscreen mode Exit fullscreen mode

Importing and exporting modules uses this concept quite a bit.

Array Destructuring

What if instead we had an array.

[
  {
    item: "this thing"
  },
  {
    num: 200
  }
]
Enter fullscreen mode Exit fullscreen mode

Accessing it without destructuring assignment is less than ideal.

(result) => {
   result[0].item
}
Enter fullscreen mode Exit fullscreen mode

But look how powerful ES2015+ is!

([data, status]) => {
   data.item
}
Enter fullscreen mode Exit fullscreen mode

Together and with aliases!

I came across an amazing use case for destructuring assignment while using Promise.all the other day. If you aren't familiar, Promise.all resolves multiple promises and puts the results in an array. Something like

[result1, result2]
Enter fullscreen mode Exit fullscreen mode

Now, think about a typical promise response (especially if it's an http request) both of the results likely look similar to this.

{
  data: {
    item: "this thing"
  }
}
Enter fullscreen mode Exit fullscreen mode

We can combine both of our previous examples and make this a lot cleaner to access the content inside each response object.

Promise.all([
            promise1,
            promise2,
        ]).then(([{ data: result1 }, { data: result2 }]) => {
            result1.item
        });
Enter fullscreen mode Exit fullscreen mode

Now, there are a number of things happening here.

  • We're using array destructuring to access each item in the array individually.
  • Then, we use object destructuring on those array entries.

But there is a twist. What is this?

{data: result1}
Enter fullscreen mode Exit fullscreen mode

This is assigning a variable name to the data object. We don't want to use data because we're also accessing something called data in result2. Note that the object we're accessing goes first and the name goes second. The following wouldn't work.

Promise.all([
            promise1,
            promise2,
        ]).then(([{ result1: data }, { result2: data }]) => {
            result1.item
        });
Enter fullscreen mode Exit fullscreen mode

You must have unique variable names (understandably). And in this example data is being used twice.

The Power

But there you have it. Look at how much cleaner our code can be with destructuring assignment!

Discussion (17)

pic
Editor guide
Collapse
michi profile image
Michael Z

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...

Collapse
laurieontech profile image
Collapse
kip13 profile image
kip • Edited

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

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

Destructuring is good for readability.

Collapse
laurieontech profile image
Laurie Author

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

Collapse
kip13 profile image
kip • Edited

In the array above you could:

const [{ data }, { status }] = [
  {
    data: {
      item: "this thing"
    },
  },
  {
    status: {
      num: 200
    }
  }
]
Thread Thread
laurieontech profile image
Laurie Author

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

Collapse
anpos231 profile image
anpos231 • Edited

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

({data: {item = 'I am default'} = {}} = {}) => {
   item
}
Collapse
laurieontech profile image
Laurie Author

Great addition!

Collapse
bradtaniguchi profile image
Brad

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!

Collapse
laurieontech profile image
Laurie Author

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!

Collapse
hisdewdnesss profile image
Various

Nice, learned a new trick from this :)

Collapse
fellipegpbotelho profile image
Collapse
nirmalpatel59 profile image
Collapse
roninjosue profile image
Reynaldo Josué Cano Bárcenas

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

Collapse
laurieontech profile image
Laurie Author

So glad it was helpful!

Collapse
arlopezg profile image
Alejandro López • 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'
Collapse
laurieontech profile image
Laurie Author

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