Destructuring assignment in JavaScript
Destructuring assignment syntax (Introduced in ES6) is a JavaScript expression that allows us to extract data from arrays, objects, and maps and set them into new, distinct variables. For example,
Before ES6:
From ES6:
Note: When destructuring objects, you should use a variable name corresponding to the object key. The order of the name does not matter in object destructuring.
If you want to assign different variable names for the object key, you can use:
Array Destructuring
You can also similarly perform array destructuring. For example,
Assign Default Values
You can assign the default values for variables while using destructuring. For example,
In the above program, tags have only one element. Hence, the variable tag1 will be Tower A, and variable tag2 takes the default value Flooring.
In object destructuring, you can similarly pass default values. For example,
Assignment separate from declaration
A variable can be assigned its value via destructuring, separate from the variable’s declaration.
Note: The parentheses ( … ) around the assignment statement are required when using object literal destructuring assignment without a declaration.
Your ( … ) expression needs to be preceded by a semicolon or it may be used to execute a function on the previous line.
Swapping Variables
By using destructuring assignment syntax, you can easily swap values of two variables in one expression. Without destructuring assignment, you need a temporary variable to swap values of two variables.
Ignore values
You can ignore unwanted values in an array without assigning them to local variables. For example,
Assigning the rest of object and array to a variable
When destructuring an object and array, you can unpack and assign the remaining part of an object and array to a variable using the rest pattern. For example,
Note: Always consider using the rest (…) operator as the last element. SyntaxError will be thrown if a trailing comma is used on the right-hand side of a rest element.
Nested object and array destructuring
You can also perform nested destructuring on object and array. For example,
In the above example, the variables start_date and end_date are nested properties of object task and the variables tag3 and tag4 are nested elements of tags.
To execute the nested destructuring assignment for objects, you have to enclose the variables in an object structure (by enclosing inside {}) and [] for an array.
Resources:
I hope by now you must have got a clear understanding of how destructuring works in JavaScript. So we know that destructuring sneaks into your everyday use of the language, quietly making your code a bit shorter and cleaner all over the place.
I’d love to hear your thoughts on using destructuring in other ways. You can also share a snippet in the comments below to help your fellow developers. Stay tuned for Part 2 to get in-depth Knowledge about Destructuring & Its applications.
Happy Coding!
