Reintroduction of Destructuring Assignment

One of the useful features in the ES2015 standard is destructuring assignment. This is a feature that allows access to an array or an object and references internal components more directly. Common examples are as follows:

Although a useful syntax, many people forget the possibilities that destructuring assignment can perform. This article will look at five practical examples of array and object decomposition. Sometimes both.

1. Nested decay

The ability to access the top key of an object or the first element of the array is quite useful, but there are certain limitations. It only reduces complexity at the first level and leaves a series of references to be accessed through the dot syntax . or [0] .

But actually, decomposition syntax can perform at lower levels in an object. Take the example of the response of an HTTP request. We need to retrieve user data in the data object. Thanks to the decomposition syntax, we can do this easily through the object’s lock.

Same with nested arrays. In this case, the key corresponds to the position of the element in the array. The decomposition is performed using reference variables (or placeholders using commas , ) for each element of the array. Variable names can be named any name.

Note to use this feature wisely. Get the use case variable and who will read this code. Consider readability and reduce continuous change. For example, if you only need to access a child array in any one array, the map syntax may be more appropriate.

2. Decomposing objects and arrays

Objects and arrays are common data structures. In fact, this data type will appear inside the other data type. With nested decay. We can access nested properties even if they differ in the structure of the data structure.

For example, an array in an object.

Otherwise, an array of objects:

Actually, there is a problem in the above example. We can only access the name of the first user; otherwise, it will have to use variable names other than the name , resulting in the decay becoming invalid. In the context of subsequent decays, this problem will be solved.

3. Identifier

As in the previous example (objects in an array with the same key name), we cannot use decomposition syntax in the usual way. Variable names cannot be repeated within the same scope (this is the simplest explanation, but it’s obviously more complicated than that).

The identifier only applies to the object. Simply, because for an array, the variable name can be arbitrary, instead of having to match the key of an existing object.

4. Default value

Decomposition syntax often considers the reference value to exist, but what if it doesn’t? It will be quite inconvenient to handle code that has undefined values. That is the time when the default values ​​are needed.

Consider the example with the object:

If the referenced key is valid, the default value will be ignored. If the key does not exist in the object, the default value is used.

Similar to arrays:

For an example of an array, the default value is also ignored if there is an element in the corresponding array. In this example we decay more elements than the actual number of elements in the array. So what happens when fewer particles are decayed?

5. Value ignored

One of the useful points of decomposition syntax is to allow partial access to the data structure. This includes isolating the necessary values ​​and ignoring the rest of the data.

Consider the following example:

In the example above, the organization key has not decayed and is completely okay. It can still be joined in the user object the usual way:

For arrays, there are two ways to omit array elements. In the example of the object, we refer to the internal values ​​using the name of the associative key. When decaying the array, the variable name will correspond to the location that appears. The following example will omit the last element of the array:

We have decomposed the first and the second element of the array. The rest is ignored. But what if you want to decompose the elements after this? If we rely on the position of elements in the array, do we have to decompose all the elements until we find the desired element?

The answer is not necessarily. Instead, we can use commas to refer to the existence of an element in the array, but not to refer to these ignored elements.

We can combine both of the above. Ignore any element by using only commas. Again, similar to the example of the object, the ignored elements can still be referenced in the usual way with the roleCounts array.

Related examples

The flexibility and robustness of the syntax of decomposition leads to some quite strange phenomena. Whether or not adjacent is useful is still an interesting option.

One such example is that decomposition can be used to create shallow copies:

Another example when decomposition syntax is used for de-reference.

As always, readability is extremely important and all of these examples should be used wisely. However, knowing the choices will help us find the best solution.

Conclude

JavaScript is full of complicated objects and arrays. Whether it is a response from an HTTP request or a static data set, it is important to be able to access embedded content effectively. Using destructuring assignment is an optimal way to do that. It not only handles multiple nested levels, but also allows centralized access and assigns default values ​​in case of an unknown reference.

** Translation **

Laurie , A Re-Introduction To Destructuring Assignment