Lesson Tuesday

One of the most popular ES6 features is object and array destructuring. Destructuring is the process of taking specific elements from an array or properties from an object and then turning them into variables. While it's not essential to incorporate this feature in our projects right now, it's a useful convenience. Object destructuring is very common in React, so even if you don't use it much now, it will come up again once we start working with React. You will not be expected to incorporate destructuring for this section's independent project. However, you should recognize destructuring out in the wild - and give it a whirl in your projects if you can.

Array Destructuring

Let's say we have an array of numbers that looks like this:

const numArray = [1, 2, 3];

To get elements from the array and assign them to variables, we might do something like this:

const firstElement = numArray[0];
const secondElement = numArray[1];
const thirdElement = numArray[2];

We can make this process much simpler with array destructuring:

const [firstElement, secondElement, thirdElement] = numArray;

In this example, we are destructuring the elements of the array into variables. firstElement corresponds to the first element of the array, secondElement corresponds to the second element, and so on.

Try this out in the console and check the values of each of the variables.

We've reduced three lines of code to one.

We don't have to destructure the entire array. For instance, if we just need the first element, we could do this:

const [firstElement] = numArray;

The firstElement variable is now set to the first element in numArray - but there is no secondElement or thirdElement.

Object Destructuring

Object destructuring is both more useful and more common. We can use it to assign specific properties of an object to variables. Here's an example:

const obj = {
  color1: "red",
  color2: "blue",
  color3: "yellow",
  description: "Information we don't need",
  anotherProp: "We don't need this info, either"
};

Let's say we just want to get the colors from this object. We can destructure them like this:

const { color1, color2, color3 } = obj;

In this example, we are pulling out the properties from the object and saving them as constants with the same names.

Try it in the console:

color1;
> "red"
color2;
> "blue"
color3;
> "yellow"

Since we've only destructured the colors, we don't have equivalent variables for description or anotherProp.

Let's say we want to take this one step further and create a variable for a property - but the variable should have a different name from the original property. We can do this:

const { color1: red, color2: blue } = obj;

Now we have variables for red (which corresponds to the color1 property) and blue (which corresponds to the color2 property). Note that there is no color1 or color2 variable because we chose different names for the variables.

By the way, the syntax for object destructuring should already look familiar from the import statements we've used with named exports. For instance, as we discussed in the ES6 Imports and Exports lesson, we can do the following:

import { Triangle, Rectangle, Circle } from './shapes.js';

As we can see, import statements that are used with named exports use this destructuring syntax as well.

This lesson covers the basics of array and object destructuring but there are plenty of other things we can do with destructuring, too. Check out the Mozilla documentation on Destructuring Assignment to learn more.

Lesson 40 of 48
Last updated April 8, 2021