**Exercise 1.** Swap two variables using one destructuring assignment.

**Solution**:

1 2 3 4 5 |
let text1 = 'swap', text2 = 'me'; [ text1, text2 ] = [ text2, text1 ]; |

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

;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function fib( n ) { let fibCurrent = 1; let fibLast = 0; if ( n < 0 ) return NaN; if ( n <= 1 ) return n; for ( let fibIndex = 1; fibIndex < n; ++fibIndex ) { // Insert one destructuring expression here } return fibCurrent; } |

{#Solutions_Destructuring2}

**Solution:**

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function fib( n ) { let fibCurrent = 1; let fibLast = 0; if ( n < 0 ) return NaN; if ( n <= 1 ) return n; for ( let fibIndex = 1; fibIndex < n; ++fibIndex ) { [fibCurrent, fibLast] = [fibCurrent + fibLast, fibCurrent]; } return fibCurrent; } |

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

1 2 3 4 5 |
let node = { left : { left: 3, right: 4 }, right: 5 }; let { loft : {}, right : val } = node; |

**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:

1 2 3 4 5 |
let node = { left : { left: 3, right: 4 }, right: 5 }; let { loft, right : val } = node; |

`loft`

becomes`undefined`

,`val`

becomes`5`

.

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

.

1 2 3 |
let x = { A: [ 't', 'e', 's', 't' ] }; |

{#Solutions_Destructuring4}

**Solution:**

1 2 3 |
let { A : [ , , A_2 ] } = x; |

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:

1 2 3 4 5 6 7 8 |
let config = { chartType : 0, bullColor : 'green', bearColor : 'red', days : 30 }; |

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.

1 2 3 4 5 |
function drawChart( data, /* insert your solution here */ ) { // do not implement the function body }; |

**Solution:**

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
let config = { chartType : 0, bullColor : 'green', bearColor : 'red', days : 30 }; function drawChart( data, { chartType = 0, bullColor = 'green', bearColor = 'red', days = 30 } ) { // do not implement the function body console.log( chartType, bullColor, bearColor, days ); }; drawChart( [], {} ); // 0 "green" "red" 30 drawChart( [], { chartType: 1, days: 60 } ); // 1 "green" "red" 60 |

**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:

1 2 3 4 5 |
function drawChart( data, options = {} ) { _drawChart( data, options ); } |

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

.

1 2 3 4 5 6 7 8 9 10 11 12 13 |
function drawChart( data, { chartType = 0, bullColor = 'green', bearColor = 'red', days = 30 } = {} ) { // do not implement the function body console.log( chartType, bullColor, bearColor, days ); }; drawChart( [] ); // 0 "green" "red" 30 |

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`

.