Course: Section

Get Started with Modern React: Intro, Setup, and ES6 Basics

Episode: Title

S01・V12: Destructuring Assignment

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
  1. We will show you how to use the destructuring assignment syntax with arrays.
  2. We will show you how to destructure objects.
Watch Video
Duration: 3m 24s

Destructuring Assignment Syntax

Since JavaScript ES6, destructuring assignment syntax makes it possible to unpack values from arrays, or properties from objects, and put them into distinct variables.

Now, let’s say we have an array of two numbers, 10 and 20:

[10, 20]

Assume that we want to assign the first number 10 in the array to a variable named a, and the second number 20 to a variable named b.

Using “destructuring assignment syntax”, we can achieve this very easily, without indexing the array items.

const [a, b] = [10, 20];

That’s all we need to do to unpack and assign the array values to the variables.

We will print out the values of the variables to the Console to prove this.

const [a, b] = [10, 20];

console.log("a:", a); // Prints `a: 10`console.log("b:", b); // Prints `b: 20`

We can also separate the declaration of the variables from the assignment.

let a, b;
[a, b] = [10, 20];
console.log("a:", a); // Prints `a: 10`
console.log("b:", b); // Prints `b: 20`

The output is the same.

Returning Multiple Values from a Function

A function can return an array of values, and destructuring can make working with the returned array values more concise.

Let’s say we have a function that returns the array of two numbers [1, 2]:

function f() {
  return [1, 2];
}

In line 7 below, instead of the array literal on the right-hand side of the assignment, we can call the function f instead:

function f() {
  return [1, 2];
}

let a, b;

[a, b] = f();
console.log("a:", a); // Prints `a: 1`
console.log("b:", b); // Prints `b: 2`

The function f returns the array [1, 2], and its values are unpacked and assigned to the variables a = 1 and b = 1, in one line of code.

Destructuring Objects

We can also use the destructuring assignment syntax with objects.

For example, let’s say we have an object named obj with two properties:

const obj = { prop1: 42, prop2: true };

Before JavaScript ES6, in order to parse prop1 and prop2 into their own variables, we would have had to write the following statements:

const obj = { prop1: 42, prop2: true };

const prop1 = obj.prop1;const prop2 = obj.prop2;

Using destructuring assignment, this can be expressed much more concisely:

const obj = { prop1: 42, prop2: true };

// const prop1 = obj.prop1;
// const prop2 = obj.prop2;
const {prop1, prop2} = obj;

Let’s print out these variables to prove that it works.

const obj = { prop1: 42, prop2: true };

// const prop1 = obj.prop1;
// const prop2 = obj.prop2;
const {prop1, prop2} = obj;

console.log("prop1:", prop1); // Prints `prop1: 42`
console.log("prop2:", prop2); // Prints `prop2: true`

Summary

We showed you how to use the destructuring assignment syntax with arrays, and we showed you how to destructure objects.

Next Up…

In the next video, we will look at “ES modules”.