ES6 Destructuring Objects and Arrays

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:

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:

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:

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.

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:

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:

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.

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.

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:

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.

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_ where I post weekly coding tips.

I would love to talk to you.