JavaScript: The React Parts

Destructuring

The second syntactic sugar that we will learn is destructuring.

There are two types of destructuring, array destructuring and object destructuring. Let's discuss them one by one.

Array Destructuring

A common use case in JavaScript is to access item of an array at specific position, e.g.

js

With array destructuring:

js

The thing that may confuse people when first learn about destructuring is they may confuse the expression on the left hand side ([]) as "creating a new array".

Instead, think of the left hand side as "describing the shape" of the result of right hand side.

The great thing about the destructuring is it is very visual, you can virtually do a visual mapping between the result and the assigned variables. Besides, it's like a self documenting code, where it document the expected shape of the result of getPersons call.

Ignoring Some Item

js

With destructuring,

js

...Rest

Sometimes, you want to get the first few items of an array, and group all the remaining items into separate array.

js

With the ... (rest) syntax, you can do this:

js

With Default Value

Sometimes, while getting a value from an array, you may want to assign a default value:

js

Same code* with destructuring:

js

There is a slight difference between the two versions of code: the default value in destructuring only kicks in only if the value is undefined, if the value is falsy (0, null, or ""), the value will not get assigned but it would for the first version.

js

You may ask, why only undefined?

That's because in most cases, undefined value is usually a out-of-bound case or unassigned scenario, while others values are assigned intentionally.

js

Nested Array Destructuring

Sometimes the data structure can be nested array (array in array).

js

We can use destructuring here too!

js

With nested destructuring, you need to be careful as it may throw you error!

js

That's because when you try to do the inner destructuring, the code is trying to destructure undefined. It's clearer if you translate the new syntax to the old syntax:

js

So what should we do? Use the default value.

js

Exercise

Rewrite the following code with destructuring.

js
js

Object Destructuring

A more common use case in JavaScript is to get specific properties from a object.

js

With destructuring:

js

Shorthand

In most cases, your variable name will be similar to the property name:

js

In that case, the destructuring syntax can be even shorter:

js

Ignoring Some Item

js

...Rest

Similar to array where you can collect all the remaining items into an array, you can do something similar for object:

Old syntax:

js

With destructuring:

js
function getPerson() {
return {
firstName: 'Malcolm',
lastName: 'Kee',
age: 29,
};
}
var { firstName, ...otherDetails } = getPerson();
console.log(firstName); // 'Malcolm'
console.log(otherDetails); // { lastName: 'Kee', age: 29 }

With Default Value

You can provide default value during destructuring.

js

With new syntax:

js

Nested Object Destructuring

Similar to array, you may have nested object

js

With destructuring

js

Similar to nested object destructuring, you may need to provide default empty object to avoid error.

js

To avoid that, do this

js

Combining Object and Array Destructuring

Example for Array of Object

js

Example for Object containing Array

js

Exercise

Rewrite the following code with destructuring.

js
js

Destructuring in Function Parameter

All the destructuring that we have discussed can be applied to function parameters.

js
js

In fact, the ... syntax has special meaning as function parameters: it converts the parameters into an array.

js

Default Parameter for Function

In addition of concept of destructuring and rest could be applied to function parameter, the concept of default value applies to function parameter too.

js

formatMoney is a function that will join the value of a number with the currency symbol. However, the currency symbol (second parameter) will be default to 'RM' if not provided.

Similar to default value during destructuring, function default parameter only works if that parameter is undefined, as demonstrated in the third usage example.

Exercise

Rewrite the function to use destructuring to assign default

js
Comments
Reply
Malcolm Kee on June 14, 2019, 2:17 AM

Answers for the exercises are available here

Issue on this page? Report here