Implementation of Javascript Deconstruction in ES6

The deconstruction feature in ES6 makes it easier to get values from objects (Object) or arrays (Array), and the code is more readable. Those who have been exposed to python language before should be familiar with this feature, which has already been implemented in python. In python, we can get the value through the following code

lst = [3, 5]
first, second = lst 
print(first, second)

first and second two variables, were assigned on the array of 3 and 5, is it very simple and clear?
Before we have this feature, how do we get values from objects or arrays? Let's take a look at the following code:

let list = [3, 5]
let first = list[0]
let second = list[1]

In this way, you have to manually specify an array subscript to assign the corresponding value to the variable you specify. If you use the deconstruction feature of ES6, the code will become simpler and more readable:

let [first, second] = list;

Deconstruction of objects

Basic object deconstruction

First, let's look at how the basic object deconstruction in ES6 should be written:

const family = {
 father: ''
 mother: ''
}
const { father, mother } = family;

We deconstruct its two properties, father and mother, from the family object and assign them to other defined father and mother objects. After that, we can get the corresponding key value in family directly through father and mother variables. This example is the simplest application of deconstructing objects. Let's take a look at the more interesting ones.

Deconstruct an undeclared object

In the above example, we first declare the family object, and then get the value from it through the deconstruction syntax. Is it possible if you don't declare it?

const { father, mother } = {father: '',mother: ''}

In fact, it is also possible. In some cases, we don't need to declare an object or assign an object to a variable, and then deconstruct it. Many times we can directly deconstruct undeclared objects.

Deconstruct objects and rename variables

We can also deconstruct the attributes in the object and rename them, such as:

const { father: f, mother:m } = {father: '1',mother: '2'}
console.log(f); // '1'

In the above code, after the father in the object is deconstructed, it is re-assigned to the variable f. Compared with the previous example, it is equivalent to renaming the father variable as f. Next, you can continue with f.

Deconstruct default value

Imagine a scenario in which an family object is returned in the background. Originally, the family object agreed to have three attributes, namely father, mother and child. You get the returned data and deconstruct these three attributes:

const { father, mother, child } = {father: '1',mother: '2', child: '3'}

There seems to be nothing wrong with this, but the reality is always unsatisfactory. Because the background code has bug, the returned family object only contains mother and child, missing father. After deconstructing the above code, father becomes undefined:

const { father, mother, child } = {father: '1',mother: '2'}
console.log(child) //undefined

Most of the time, we want to deconstruct a default value when an attribute is missing in the background. That can actually be written like this:

const { father = '1', mother = '2', child = '3'} = {father: '1',mother: '2'}
console.log(child) //'3'

Combined with the previous example, you can change the quantity name and assign the default value:

const { father: f = '1', mother: m = '2', child: c = '3'} = {father: '1',mother: '2'}

Deconstructing in function parameters

let list = [3, 5]
let first = list[0]
let second = list[1]

0

In the parameters of the function, the attribute values of the incoming and outgoing objects can be directly obtained by deconstruction, without passing in family. father as before.

Deconstructing nested objects

In the above example, the attributes of family are only 1 layer. If the values of some attributes of family are also 1 object or array, how can we deconstruct the attribute values of these nested objects? Let's take a look at the following code:

let list = [3, 5]
let first = list[0]
let second = list[1]

1

Deconstruction of array

In fact, the deconstruction of arrays is very similar to that of objects, which was mentioned slightly at the beginning of the article, but let's look at some typical scenarios of array deconstruction.

Basic object deconstruction

let list = [3, 5]
let first = list[0]
let second = list[1]

2

As long as it corresponds to the position of the array, it can correctly deconstruct the corresponding value.

Deconstruct default value

With the default value scenario of object deconstruction, we often need to add default values when deconstructing arrays to meet business needs.

const car = ['AUDI', 'BMW'];

const [audi, bmw, benz = 'BENZ'] = car;
console.log(benz); // "BENZ"

Exchanging variables in deconstruction

Suppose we have the following two variables:

let list = [3, 5]
let first = list[0]
let second = list[1]

4

If we want to exchange these two variables, the past practice is:

let list = [3, 5]
let first = list[0]
let second = list[1]

5

It needs to be realized with the help of an intermediate variable. It is much simpler to use array deconstruction:

let list = [3, 5]
let first = list[0]
let second = list[1]

6

If you want to exchange element positions within an array, such as [1, 2, 3] to [1, 3, 2], you can do this:

let list = [3, 5]
let first = list[0]
let second = list[1]

7

Deconstruct an array from the return of a function

Many functions return results of array type, and you can get values directly through array deconstruction:

functin fun(){
 return [1,2,3]
}
let a, b, c; 
[a, b, c] = fun();

Of course, if we only want the function to return one of the values in the array, we can also ignore them

let list = [3, 5]
let first = list[0]
let second = list[1]

9

As you can see, the deconstruction feature of ES6 is very useful in many scenarios. I hope you can use more deconstruction to the project, so that the code becomes more simple, clear and easy to understand.