3 Powerful Examples of Destructuring Assignment

Laurie - Jun 11 '19 - - Dev Community

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!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .