Beginner's Guide To ES6 Destructuring
Tags: javascript, beginners
Published: 2019-06-27 11:34:52

Cross-posted from [developer.blog](https://developer.blog/es6-destructuring) 🥳

ES6 comes with a bunch of new features, one of which is destructuring. This is a very handy way to **extract items from objects and arrays** which -once understood- can make your code much cleaner and more readable.

Let's get started!

## First things first ☝️
In this post we'll see lots of code that looks like the following:

```javascript
const { property1, property2 } = object
```

- The **left-hand** side are the variables **being assigned**
- The **right-hand** side is the **source** where the information comes from

## Destructuring objects 📦
Let's assume we have an object `movie` which contains `id`, `title`, `year` as properties:

```javascript
const movie = {
    id: 99,
    title: 'The Matrix',
    year: 1999
}
```

If we were to extract the properties of this object the **old-fashioned way**, we'd have to do something like this:

```javascript
const id = movie.id
const title = movie.title
const year = movie.year
```

To make your code more readable, you can use **the ES6 way**:

```javascript
const { id, title, year } = movie
console.log(id, title, year); // 99 The Matrix 1999
```

You'll get exactly the same result as in the example with 3 lines of code. As a result you have three variables `id`, `title`, `year` which each contain the respective value from the object `movie`.

> It's important to know that the **variable name and the object property have to be the same**!

### Using a different variable name
If you can't or don't want to use the same variable name as property (e.g. if you have already a variable with that name in use), you can **add a colon and indicate the desired variable name**:

```javascript
const { originalPropertyName:newPropertyName } = object

// Example 👇
const { title:movieTitle, year:releaseYear } = movie
```

### Defining a default value
If you're in the situation you want to fill in a default value in case a destructed property is undefined, you can add `=` followed by the default value:

```javascript
const { title, rating = 3 } = movie
```

We didn't define a `rating` property in our `movie` object, so it would normally be `undefined`. But as we used the default value syntax, the `rating` variable would have 3 in case it's not yet.

### Use destructing in a function parameter

```javascript
const printMovie = ({ title, year, rating }) => {
    // Work directly with the destructed properties
    console.log(`The movie ${title} (${title}) has a ${rating} rating`)
    console.log(`⭐️`.repeat(Math.floor(rating)))
}
```

### Extracting from nested objects

If you have nested objects, you can apply the same principle, only ... well *nested*.

```javascript
const character = {
    movie: 'The Matrix',
    name: 'Thomas A. Anderson',
    alias: 'Neo',
    actor: {
        firstname: 'Keanu',
        lastname: 'Reeves'
    }
}
```

If you'd be interested in only the actor of this movie character, you can apply nested destructuring:

```javascript
const { actor: { firstname, lastname } } = character
console.log(firstname, lastname) // Keanu Reeves
```

## Destructuring arrays ⛓

ES6 also defines some nifty ways of destructuring arrays.

Let's take a look at the old way first:
```javascript
const food = ['🍕', '🌭', '🍔', '🍍', '🍓']
const pizza = food[0]
const hotdog = food[1]
const burger = food[2]
console.log(pizza, hotdog, burger) // 🍕 🌭 🍔
```


In ES6, you can get the values as such:
```javascript
const food = ['🍕', '🌭', '🍔', '🍍', '🍓']
const [pineapple, strawberry] = food
console.log(pineapple, strawberry) // 🍍 🍓
```

What might be interesting to know:
> You can destructure anything that is *[iterable](https://javascript.info/iterable)*. That includes String.

```javascript
const fruitSalad = '🍏🍌🍐🍒🍇'
const [s, a, l, a, d] = fruitSalad
console.log(d,a,l,a,s) // 🍇🍒🍐🍌🍏
```

### Ignoring items in an array

When destructuring an array, you can ignore values that might not be of interest to you. Also: You can skip as many items as you want.

```javascript
const breakfast = ['🥐','🍳', '🧀','🥓', '🥖']

const [croissant, eggs,, bacon] = breakfast
console.log(croissant, eggs, bacon) // 🥐🍳🥓

const [,,cheese,,baguette] = breakfast
console.log(cheese, baguette) // 🧀🥖
```

### Using the *rest* operator

If you have an array where you want to get certain items in variables and *the rest* in a separate array, you can use the [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) (`...rest`):

```javascript
const food = ['🥐', '🥞', '🥦', '🍆', '🍅']
const [croissant, pancakes, ...veggies] = food
console.log(croissant, pancakes) // 🥐🥞
console.log(veggies) // ["🥦", "🍆", "🍅"]
```

### Swapping variables using destructuring

A handy trick for swapping variables is, using destructuring to do so. Let's assume you have variables x and y, having each a value:

```javascript
let x = 4711
let y = 1337
```

To swap them, you could to it by using a temporary variable:
```javascript
let temp = x
x = y
y = temp
```

But that's not clean or readable. ES6 destructuring gives a great way to swap these numbers:
```javascript
[x, y] = [y, x]
console.log(x, y) // 1337 4711
```

## Summary 🙌

As you see in the examples, destructuring is a great way to make your code shorter and better readable. So whenever you find yourself repeating something like
```javascript
this.value1 = anotherObject.value1
this.value2 = anotherObject.value2
this.value3 = anotherObject.value3
this.value4 = anotherObject.value4
````
you have an opportunity to apply destructuring.

So, head on to your latest pet project and check if there is anywhere you can apply this knowledge 😊