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

What's your favorite addition to ES2015+

Laurie ・ Jun 11 '19 ・ 1 min read

#discuss #javascript #webdev

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"
  }
}

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

(result) => {
   result.data.item
}

With destructuring assignment, we can change it to this!

({data}) => {
   data.item
}

Importing and exporting modules uses this concept quite a bit.

Exports and Imports and Defaults, Oh My!

Laurie ・ Apr 29 '19 ・ 3 min read

#javascript #react #webdev #beginners

Array Destructuring

What if instead we had an array.

[
  {
    item: "this thing"
  },
  {
    num: 200
  }
]

Accessing it without destructuring assignment is less than ideal.

(result) => {
   result[0].item
}

But look how powerful ES2015+ is!

([data, status]) => {
   data.item
}

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]

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"
  }
}

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
        });

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}

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
        });

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!

3 Powerful Examples of Destructuring Assignment