3 Powerful Examples of Destructuring Assignment
Tags: javascript, webdev, productivity, beginners
Published: 2019-06-11 17:12:09

---
title: 3 Powerful Examples of Destructuring Assignment
published: true
description: I might be a bit obsessed, but this ES2015+ tool has so many wonderful uses!
tags: javascript, webdev, productivity, beginners 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/iqgd0394b096sy7fcvh1.png
canonical_url: https://tenmilesquare.com/3-powerful-examples-of-destructuring-assignment/
---


ECMAScript is always adding new features that make our code more powerful. I even started a discussion about people's favorites.
 {% link https://dev.to/laurieontech/what-s-your-favorite-addition-to-es2015-5468 %}

In there, I listed that mine was destructuring assignment. You can read more about it in the [mozilla docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).

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:

```javascript
{
  data: {
    item: "this thing"
  }
}
```
If we pass it into a function and access `item` it's kind of messy.

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

With destructuring assignment, we can change it to this!

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

Importing and exporting modules uses this concept quite a bit. 
{% link https://dev.to/laurieontech/exports-and-imports-and-defaults-oh-my-fa3 %}


# Array Destructuring

What if instead we had an array.

```javascript
[
  {
    item: "this thing"
  },
  {
    num: 200
  }
]
```
Accessing it without destructuring assignment is less than ideal.

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

But look how powerful ES2015+ is!

```javascript
([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

```javascript
[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.

```javascript
{
  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.

```javascript
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?

```javascript
{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.

```javascript
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!