Destructuring Objects

Question 1

What is the destructuring of objects?

Answer 1

A javascript syntax that allow you to etract the data from an object in new top level variables without manually having to declare them.

Question 2

What is the syntax for destructuring an object?

Answer 2

const person = {
    first: 'Wes',
    last: 'Bos
}
const { first, last } = person;

Question 3

How would you destructure nested data?

Answer 3

const { twitter, facebook } = wes.link.social;

const wes = {
    link: {
        social: {
            twitter: "url",
            facebook: "url"
        }
    }

Question 4

In the process of destructuring, how would you rename the new variable?

Answer 4

the second param here is the new var name

const { twitter:tweet, facebook:fb } = wes.links.social

Question 5

If you are destructuring from an object but that object doesn’t have all the required variable what can you do?

Answer 5

Set default parameters in the destructuring syntax. These will be used if the variable isn’t present in the object being used.

const setting = { width: 300, color: 'black'  }
const width { width = 100, height = 100, fontSize = 25 }

Question 6

What will the outcome be of this destructuring expression be and why?

const { w: width = 400, h: height = 500} = { w: 800 }

Answer 6

width = 800;
height = 500;

w is found in the object and so it’s value is used. The h is not found and so it’s default of 500 in the destructuring expression is used instead.

Question 7

How would you destructure an array?

Answer 7

Just like an object but using square brackets:

const data = [name, id, website] = details;

Question 8

how would you destructure this?

const data = ‘basketball,sports,90210,23,web,bos,cool’;

Answer 8

const [itemName, category, sku, inventory] = data.split(‘,’);

Question 9

How would you group together the rest of the extra variables in an array while destructuring?

Wes is Captain,
Harry is Assistant
and the rest are players?

const team = [‘wes’, ‘harry’, ‘sarah’, ‘keegan’, ‘Riker’];

Answer 9

Using the rest operator.

const team = [‘wes’, ‘harry’, ‘sarah’, ‘keegan’, ‘Riker’];

const [captain, assistant, …players] = team

Question 10

How would you swap two variables with destructuring?

let inRing = 'hulk hogan';
let onSide = 'The rock';

And why is this helpful?

Answer 10

[inRing, onSide] = [onSide, inRing];

This will swap the variable preventing the need for a temporary variable.

Question 11

How would you destructure a return function and what would flexibility does it allow you?

Answer 11

convertCurrency function returns an object with multiple values.

const { USD, AUD } = convertCurrency(100);

You can choose just the property you need in any order because it is an object.

Question 12

When destructuring an object into a function, how would you write it?

Answer 12

with curly brackets.

function tipCalc( { total = 100, tip = 0.15, tax = 0.13 } );

Question 13

When destructuring an object into a function without any parameters passed in what is wrong with this?

function tipCalc( { total = 100, tip = 0.15, tax = 0.13 } );

Answer 13

You get a desctructuring error because no object has been passed. The destructuring object it self then needs a default argument.

If this could happen you can add = {}

function tipCalc( { total = 100, tip = 0.15, tax = 0.13 } = {} );

Question 14

What are the benefits of destructuring parameters in a function?

Answer 14

by adding curly brackets, and passing an object the function automatically create our variables for us with out the need to create them ourselves with something like 
let name = options.name;

This allows our function parameters to order independant.

You can leave off things when calling the function and the default will kick in.