ES6 Destructuring Objects and Arrays
Tags: javascript, tutorial
Published: 2019-08-06 11:45:15


ES6 has introduced an awesome feature that is destructuring.Which is really useful when you're working wth react, for example, but the use cases for it are almost endless.

You can do array and object destructuring, or even destruct an object within an array, or vice-versa. So let's start simple, as I find myself using object destructuring the most, I'm gonna explain it first, and it's actually really simple.


---

##**Object Destructuring**
For instance, let's say you have a person object with firstName, lastName, age, and hobbies, something like this:

```javascript
const person = {
  firstName: 'John',
  lastName: 'Moore',
  age: 32,
  hobbies: [
    'coding',
    'drawing',
    'fortnite'
  ]
}
```

And let's say you wanna display on your app the first + last name alignside with a greeting message, you could do as following:

```javascript
let greeting = `Hello ${person.firstName} ${person.lastName}, welcome back!`
```

But with object destructuring, you can make it in a way that you don't actually need to do that `object.property` syntax, and you might find this useful once you go to deeper levels of destructuring. To achieve it, the code would be like this:

```javascript
const { firstName, lastName } = person
let greeting = `Hello ${firstName} ${lastName}, welcome back!`
```

You put the exact names of the properties you want to destructure inside the curly braces and after that you just tell javascript that those variables came from the person object!

##A lot easy to read, right? But you might ask yourself, where do i use it?

If you are a react developer lke me, you can use it to access state properties or props on a function/class component, or even with hooks! The code below was taken from one of my projects on GitHub, just to show how i've used it.

```javascript
export default class IntroSection extends React.Component {
  state = {
    animateIntro: false,
  };


  render() {
    const { animateIntro } = this.state;
    const { lightMode } = this.props;
    return (
      //...some code here...
    )
  }
}
```

But let's keep going, since objects aren't the only thing you can do this.

##**Array Destructuring**


The same way you can destructure objects, you can do to arrays, but it can be a bit confusing to get started.
Let's now say that you have an array of planets, like the one below:

```javascript
const planets = ["Mercur", "Venus", "Earth", "Mars"]
```

And you want to destructure it in a way that you have each planet labeled as planet 1 – 4, you could do it like this:

```javascript
const [ planet1, planet2, planet3, planet4 ] = planets
```

So as you can see, each variable on the left side is the equivalent of an index of the array, thats interesting, but also gives us some questions. 

What if I a have greater number of variables than the number of items on the array? 
And what if i had nested arrays? 
What if i don't know exactly the size of my array?

##Dont worry, I'll cover those questions now. 

Let's begin with the first one, passing more variables than the actual number of items on the array would return undefined as the output. Simple as that.

```javascript
const [ planet1, planet2, planet3, planet4, planet5 ] = planets
// output would be: "Mercur", "Venus", "Earth", "Mars", undefined
```

##**Nested Arrays**
You can also use destructuring on nested arrays, so lets say you have now an array of numbers.

```javascript
const numbers = [5, [1, 2, 3], 6, 7]
```

And you want to get 5, 1, and 6 as the output. In this case, your code would look just like this:

```javascript
let [ a, [ b ], c ] = numbers
// Output: 5, 1, 6
```

And you can actually go as many level deep as you want, don't need to worry about that. So that's left us with the last question.

##**Mapping Through the Array**

Let's say now that you don't know exactly how many items would be on your array, but you want to destructure them all. You can do that in a simple way, using Spread Operator.

```javascript
let [ planet1, planet2, ...others ] = planets
```
>(…) is the spread operator syntax, another of the ES6 Features that i'll be showcasing soon.


Hope you've enjoyed reading through this guide.

You can find me on twitter: [@wllfaria_](https://twitter.com/wllfaria_) where I post weekly coding tips.

I would love to talk to you.