ES2015 Lesson 5: Destructuring

One of the most common tasks in JavaScript is to build, mutate, and extract data from objects and arrays. ES2015 makes this process very compact with destructuring.

Object property shorthand notation

Suppose the follwing ES5 code is given:

It is possible to define the ES6 equivalent of the file object in the following way:

The two definitions of file are equivalent.

First destructuring examples

In a destructuring expression L = R, we take the right value R, and break it down so that the new variables in L can be assigned a value. In the above code, we used the object property shorthand notation.

Without this shorthand notation, our code would look like this:

In this special case, the above code is equivalent with the following ES5 assignments:

Note that the above two lines are executed in parallel. First, the R value is fully evaluated before assigning them to left values. For instance, let's increment the variables a and b using destructuring:

If we wanted to transform this destructuring assignment to ES5, we would write the following code:

The value of a destructuring assignment of form L = R is R:

As a consequence, don't expect destructuring to be used as an alternative for filtering values.

Destructuring is right-associative, i.e. it is evaluated from right to left. L = M = R becomes L = R, which in turn becomes R after evaluation. The side effect is that in M and in L, variable assignments may take place on any depth.

In the above example, {email, nextLesson} = user is evaluated. The side effect of the evaluation is that email and nextLesson are assigned to "" and 10 respectively. The value of the expression is user. Then user2 = user is evaluated, creating another handle (or call it reference or pointer depending on your taste) for the object accessible via user.

Based on the above thought process, the below assignment should not surprise you:

Make sure you use the let keyword to initialize new variables. You can only destructure an object or an array, if all the variables inside have been declared.

Deeper destructuring

It is possible to destructure objects and arrays in any depth. Default values can also be used. Objects or arrays that don't exist on the right become assigned to undefined on the left.

Destructuring function arguments

The arguments in a function signature act as left values of destructuring assignments. The parameters of a function call act as the respective right values of destructuring assignments.

You will use destructuring function arguments in exercises 5 and 6.

Bug alert with destructuring!

Software developers tend to make mistakes. Don't overuse destructuring, always keep your code readable!

Continuing the above example, suppose you make a typo, and write neme instead of name.

The typo silently assigns the value undefined to neme, potentially causing trouble. Always pay attention to fine-tuning your debugging skills.

In an L = R destructuring expression, R cannot be null or undefined, otherwise a TypeError is thrown:

Another warning for thorough testing. When you write tests, make sure you always take care of all possible input types.


After solving the exercises, check out the reference solutions by clicking the Solutions link after exercise 6.

Exercise 1. Swap two variables using one destructuring assignment.

Exercise 2. Complete the below function that calculates the nth fibonacci number in the sequence with one destructuring assignment! The definition of Fibonacci numbers is the following:

  • fib( 0 ) = 0
  • fib( 1 ) = 1
  • fib( n ) = fib( n-1 ) + fib( n-2 );

Exercise 3. Determine all the bindings in the following assignment, and describe the execution of the destructuring assignment. Notice that loft is not the same variable name as left.

Exercise 4. Create one destructuring expression that declares exactly one variable to retrieve x.A[2].

Exercise 5. Suppose the following configuration object of a financial chart is given:

Complete the function signature below such that the function may be called with any config objects (null and undefined are not allowed as inputs). If any of the four keys are missing, substitute their default values.

Exercise 6. Modify your solution in Exercise 5 such that the user may omit the option parameter, making its value undefined.