Building Applications with Spring 5 and Vue.js 2

Nested destructuring

Similar to using object literals and array literals to create complex nested data structures with a terse syntax, you can use a destructuring assignment to pick up variables in a deeply nested data structure.

Let's see the following example, in which we only need the user's second interest:

1. let user = {name:'Sunny', interests:['Traveling', 'Swimming']};2. let {interests:[,second]} = user;3. console.log(second);    // Swimming4. console.log(interests); // ReferenceError

In line 2, even though we put interests in the destructuring assignment, JavaScript doesn't really declare it. As you can see in line 4, accessing it will raise ReferenceError. What happens here is that JavaScript uses the part on left side of the colon ...