ES2015 Lesson 5: Destructuring – Solutions


Exercise 1. Swap two variables using one destructuring assignment.

Solution:

The text1 = text2 and the text2 = text1 assignments take place in parallel from the perspective of the whole expression. The expression on the right is evaluated, and becomes [ 'me', 'swap' ]. This evaluation happens before interpreting the expression on the left.


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 );

{#Solutions_Destructuring2}
Solution:


Exercise 3. Determine all the bindings in the following assignment, and describe the execution:

Solution: Given that loft is a typo, there is no corresponding right value to the value of loft. Therefore, the recursive destructuring assignment {} = undefined will be executed. Given that undefined cannot stand on the right of a destructuring assignment, an error will be thrown, and no value bindings will take place.

In case we modified the code, removing the value of loft, the following bindings would take place:

  • loft becomes undefined,
  • val becomes 5.

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

{#Solutions_Destructuring4}
Solution:

You don’t have to provide variable names to match A[0], A[1], or A[3]. For A[3], you don’t even need to create a comma, symbolizing that A[3] exists. Similarly, adding two commas after A_2 does not make a difference either, as in JavaScript, indexing outside the bounds of an array gives us undefined.

Note that A was not created as a variable in the expression. You cannot assign the name of a variable and destructure its contents at the same time.


Question 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.

Solution:


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

Solution: We will solve this exercise without destructuring first. We will rename the drawChart function to _drawChart, and call it from drawChart after taking care of the options value:

The second solution uses a default value for the second argument, which lets us construct a solution without renaming drawChart.

When undefined is passed, the following steps take place:

  • drawChart is called with undefined as its second argument
  • as the second argument has a default value of {}, undefined is replaced by {}
  • as neither of the four keys occur in {}, the chartType, bullColor, bearColor, days will be initialized to their default values

Note that the solution won’t work with an options value of null.