The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays or properties from objects into distinct variables. Destructuring is probably something you are going to be using every single day. It is extremely useful whether writing client side or Node.JS.
Destructuring is a convenient way of extracting multiple values from data stored in possibly nested objects and arrays. You can extract properties from an object or an array multiple at a time using destructuring.
What Problem Destructuring Really Solve
We are now fine with the definition of destructuring extracting values from an array or object. The problem it solves is avoiding repetition when accessing properties. Instead of repeating code to get object properties to declare variables, destructuring allows us to destructure the object into a single line to make different variables without repeating the same code.
Object Destructuring
Consider a JavaScript object representing an employee. Traditionally you might assign properties to variables one by one. With destructuring you can write const first last employee to create variables in one line. This syntax creates variables and takes properties from the employee object. The first property and last property are put into two new variables scoped to the parent block.
Nested Object Destructuring
With a complex object you may want to access nested properties such as social media links. Normally you would dive into nested object nodes like employee.links.social.instagram. With destructuring you can write const instagram facebook employee.links.social to access nested properties more cleanly.
Array Destructuring
Array destructuring lets you assign elements to variables in a concise way. Instead of assigning indexes individually you can write let name1 name2 names to get multiple values at once.
Basic Variable Assignment
For an array let names Robert James you could traditionally assign with indexes. With destructuring let name1 name2 names does the same in a shorter syntax.
With Default Value
You can provide default values in array destructuring. For example x 50 y 70 10 assigns x to 10 and y to 70 when the second array element is missing.
Swapping Variables Without Any Temporary Variable
Destructuring also helps swap variables without a temporary variable. For example x 10 y 30 then x y y x will swap the values of x and y.
Smart Way of Passing Function Parameters
Functions with many parameters can be hard to read and maintain. A traditional function signature with multiple positional parameters and default values can be ugly and unreadable especially when you want to skip some parameters and rely on defaults.
One smart way is to pass an object as a single parameter and destructure it in the function definition. You create an object with properties matching the parameter names and pass that object into the function. The function then automatically destructures these properties into parameters with default values.
Pass Parameters as an Object
Create an object let funcParams with title and items properties and define function smartFunc title Untitled width 50 height 60 items . Calling smartFunc with the object lets the function destructure the properties into parameters.
Pass No Parameters at All Use Default Parameters
If you want to use default values you might call smartFunc with an empty object. To avoid having to pass an empty object you can give the destructured parameter itself a default value of an empty object in the function definition. Then you can call smartFunc with no arguments and it will still work using the default values.
Summary
Destructuring is very helpful in many cases. It lets you work smartly with arrays objects and functions. Destructuring sneaks into everyday use of the language quietly making code a bit shorter and cleaner throughout a codebase.
Further Reading
This Is Why Learning New JavaScript ES6 Syntax Is So Famous
Eleven Ways To Learn Javascript Array Iteration Effectively
JavaScript Fundamentals Every Beginner Should Know
