JavaScript is the main language for front-end development. It’s also used a lot for back-end development.
The language has gotten much better in the last few years.
In this article, we’ll look at one of the better features of JavaScript, which is the destructuring assignment syntax.
Destructuring Syntax on Arrays
The destructuring syntax is used for assigning object and array entries to their own variables.
For instance, we can write the following code to assign array entries to individual variables:
const [a, b] = [1, 2];
Then, the destructuring assignment syntax assigns the entries to the variables located in the same position.
Therefore, a is 1 and b is 2.
We don’t have to assign all of them to variables, so we can write something like:
const [a] = [1, 2];
Then a is 1.
Also, we can assign variables that haven’t been assigned a variable to an array.
For instance, we can write:
const [a, ...b] = [1, 2, 3];
The three dots specify that we are assigning the array entries that haven’t been assigned to a variable to an array.
Therefore, a is 1 and b is [2, 3].
We can also set a default value for variables of the destructuring assignment. For instance, we can write:
const [a, b, c = 3] = [1, 2];
Then c is 3 because we didn’t assign anything to it, so the default value of 3 is assigned to it.
Nested values also work. For instance, we can write:
const [{
foo
}, b] = [{
foo: 1
}, 2];
Then the JavaScript interpreter will match the shape of the object and the position in the array and do the destructuring assignment accordingly.
Therefore, the value of foo on the right is assigned to foo on the left and we get that foo is 1.
Destructuring Syntax on Objects
We can use the destructuring syntax on objects to assign property values to a variable with the same name as the corresponding property name.
For instance, we can write:
Then a is 1 and b is 2 since a is on the left side and a is 1, so the JavaScript interpreter matches the property name and variable name and makes the assignment by that name.
The same is done for property b .
We can set it to a different variable name also. To do this, we write:
Then we assign the 2 to c by matching the property b on the right side to b on the left side.
Like the array destructuring syntax, we can assign a default value to the variable on the left side.
For instance, we can write:
Then c is set to 3. when there’s no c property in the object. Therefore, c would be 3 in the code above.
The destructuring assignment also works with nested values. For example, we can write:
The example will set b to 3 since the JavaScript interpreter matched the structure of the objects on the left and right and then set b on the left to 3.
Values that aren’t assigned to a variable can be assigned to another object as follows:
The rest will have:
{b: 2, c: 3}
As the value since we used the ... operator.
Swapping Variables
A great application of the destructuring syntax is swapping variable values.
For instance, if we have:
let a = 1,
b = 2;
[a, b] = [b, a];
Then a is 2 and b is 1 after the application of the destructuring syntax.
It’s much less taxing on our brains since we don’t have to have temporary placeholder variables or add and subtract values to swap values.
For…of Loop
The for...of loop works with the destructuring syntax.
For instance, we can write:
Then we get:
Jane Smith
Don Smith
From the console.log output. It’s very convenient for extracting content out of the object that’s being iterated on.
Conclusion
We can use the JavaScript destructuring syntax to assign property values and object entries to variables.
It works with nested objects. We can assign extra entries to arrays with the ... operator.
The for...of loop also works with the destructuring syntax.
To write clean code, we should use this now.
