Building Applications with Spring 5 and Vue.js 2

Object destructuring

First of all, let's see an example of object destructuring:

1. let user = {name:'Sunny', interests:['Traveling', 'Swimming']};2. let {name, interests, tasks} = user;3. console.log(name);       // Sunny4. console.log(interests);  // ["Traveling", "Swimming"]5. console.log(tasks);      // undefined

As you can see, the name and interests variables defined in line 2 pick up the values of the properties with the same name in the user object. And the tasks variable doesn't have a matching property in the user object. Its value remains as undefined. You can avoid this by giving it a default value, like this:

let {name, interests, tasks=[]} = user;console.log(tasks)  // []

Another thing you can do with object destructuring is that you can ...