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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token punctuation">{</span> status <span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">,</span> data <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// instead of response.data we get...</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> response <span class="token comment">//now data references the data object directly</span> <span class="token keyword">const</span> objectList <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'value'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'value'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'value'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token comment">// instead of objectList[0], objectList[1], etc we get...</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> obj <span class="token punctuation">,</span> obj1 <span class="token punctuation">,</span> obj2 <span class="token punctuation">]</span> <span class="token operator">=</span> objectList <span class="token comment">// now each object can be referenced directly</span> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token punctuation">{</span> status <span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">,</span> data <span class="token punctuation">:</span> <span class="token punctuation">{</span> user <span class="token punctuation">:</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'Rachel'</span> <span class="token punctuation">,</span> title <span class="token punctuation">:</span> <span class="token string">'Editor in Chief'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> account <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> company <span class="token punctuation">:</span> <span class="token string">'Smashing Magazine'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">:</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">=</span> response <span class="token comment">// user is { name: 'Rachel', title: 'Editor in Chief'}</span> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token punctuation">{</span> status <span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">,</span> data <span class="token punctuation">:</span> <span class="token punctuation">{</span> user <span class="token punctuation">:</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'Rachel'</span> <span class="token punctuation">,</span> title <span class="token punctuation">:</span> <span class="token string">'Editor in Chief'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> account <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> company <span class="token punctuation">:</span> <span class="token string">'Smashing Magazine'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">:</span> <span class="token punctuation">{</span> user <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">=</span> response <span class="token comment">// user is { name: 'Rachel', title: 'Editor in Chief'}</span> |
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.
1 2 3 4 5 6 7 8 |
<span class="token keyword">const</span> organization <span class="token operator">=</span> <span class="token punctuation">{</span> users <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'rachel'</span> <span class="token punctuation">,</span> <span class="token string">'laurie'</span> <span class="token punctuation">,</span> <span class="token string">'eric'</span> <span class="token punctuation">,</span> <span class="token string">'suzanne'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> name <span class="token punctuation">:</span> <span class="token string">'Smashing Magazine'</span> <span class="token punctuation">,</span> site <span class="token punctuation">:</span> <span class="token string">'https://www.smashingmagazine.com/'</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> users <span class="token punctuation">:</span> <span class="token punctuation">[</span> rachel <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token operator">=</span> organization <span class="token comment">// rachel is 'rachel'</span> |
Otherwise, an array of objects:
1 2 3 4 |
<span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'rachel'</span> <span class="token punctuation">,</span> title <span class="token punctuation">:</span> <span class="token string">'editor'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'laurie'</span> <span class="token punctuation">,</span> title <span class="token punctuation">:</span> <span class="token string">'contributor'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token operator">=</span> users <span class="token comment">// name is 'rachel'</span> |
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).
1 2 3 4 |
<span class="token keyword">const</span> users <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'rachel'</span> <span class="token punctuation">,</span> title <span class="token punctuation">:</span> <span class="token string">'editor'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'laurie'</span> <span class="token punctuation">,</span> title <span class="token punctuation">:</span> <span class="token string">'contributor'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> rachel <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> laurie <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token operator">=</span> users <span class="token comment">// rachel is 'rachel' and laurie is 'laurie'</span> |
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:
1 2 3 4 5 |
<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'Luke'</span> <span class="token punctuation">,</span> organization <span class="token punctuation">:</span> <span class="token string">'Acme Publishing'</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token operator">=</span> <span class="token string">'Brian'</span> <span class="token punctuation">,</span> role <span class="token operator">=</span> <span class="token string">'publisher'</span> <span class="token punctuation">}</span> <span class="token operator">=</span> user <span class="token comment">// name is Luke</span> <span class="token comment">// role is publisher</span> |
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:
1 2 3 4 5 |
<span class="token keyword">const</span> roleCounts <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">2</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> editors <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">,</span> contributors <span class="token operator">=</span> <span class="token number">100</span> <span class="token punctuation">]</span> <span class="token operator">=</span> roleCounts <span class="token comment">// editors is 2</span> <span class="token comment">// contributors is 100</span> |
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:
1 2 3 4 |
<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'Luke'</span> <span class="token punctuation">,</span> organization <span class="token punctuation">:</span> <span class="token string">'Acme Publishing'</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator">=</span> user <span class="token comment">// name is Luke</span> |
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:
1 2 |
user <span class="token punctuation">.</span> organization |
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:
1 2 3 4 5 |
<span class="token keyword">const</span> roleCounts <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">100</span> <span class="token punctuation">,</span> <span class="token number">100000</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> editors <span class="token punctuation">,</span> contributors <span class="token punctuation">]</span> <span class="token operator">=</span> roleCounts <span class="token comment">// editors is 2</span> <span class="token comment">// contributors is 100</span> |
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.
1 2 3 4 5 |
<span class="token keyword">const</span> roleCounts <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">100</span> <span class="token punctuation">,</span> <span class="token number">100000</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> <span class="token punctuation">,</span> contributors <span class="token punctuation">,</span> readers <span class="token punctuation">]</span> <span class="token operator">=</span> roleCounts <span class="token comment">// contributors is 100</span> <span class="token comment">// readers is 100000</span> |
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:
1 2 3 4 5 |
<span class="token keyword">const</span> roleCounts <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">100</span> <span class="token punctuation">,</span> <span class="token number">100000</span> <span class="token punctuation">]</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> <span class="token punctuation">,</span> contributors <span class="token punctuation">,</span> readers <span class="token punctuation">]</span> <span class="token operator">=</span> roleCounts <span class="token comment">// contributors is 100</span> <span class="token comment">// readers is 100000</span> |
Another example when decomposition syntax is used for de-reference.
1 2 3 4 5 |
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> node <span class="token punctuation">:</span> <span class="token punctuation">{</span> example <span class="token punctuation">:</span> <span class="token string">'thing'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> node <span class="token punctuation">,</span> node <span class="token punctuation">:</span> <span class="token punctuation">{</span> example <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">=</span> obj <span class="token comment">// node is { example: 'thing' }</span> <span class="token comment">// example is 'thing'</span> |
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.