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’re going to be using every single day. I find it to be extremely useful whether I’m 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?

Okay, we are now fine with the definition of destructing – extracting values from an array or object. But, what problem it can solve? Where is this beneficial? What is the use-case of this? These doubts must be coming in your mind. Let me clear your doubts by taking an example.

Object Destructuring

Let’s suppose you have a below JavaScript object.

Now, look at last two lines – line 8 and 9. If you notice, we are repeating the same code to get the employee first and last name. So, we are repeating this code over and over again, to get the properties of an object to declare variables.

Okay, we got the problem now. So, how is destructuring going to sort out this? Destructuring allows us to destructure the object into a single line, to make different variables, without repeating the same code over and over again.

This new syntax is called Destructuring , getting new variables in a single line.

Let me explain, what is going on above line of code. This says, create two variables first and last , and take it from the object employee . We’re taking the first property and the last property and putting them into two new variables that will be scoped to the parent block (or window!).

So, the output of below line of code will be like this:

This is really useful in many cases, where we have simple object. What about the complex object?

Nested Object Destructuring

Let’s try this with a same complex object, where we want to access nested properties.

Now, we want to get employee’s facebook and instagram account details. We will normally write code like this:

Again, this is really very weird. We have to dive into nested object nodes to get the properties.

Let’s resolve this by using destructuring feature.

In the above code, we have seen how object destructuring works. Let’s explore this in the case of an array as well.

Array Destructuring

Let’s take a very simple example of array destructuring, and how we destructure them into variables.

Basic variable assignment

In the above code in line 4 and 5, we repeat the same mistake. Let’s do it in a destructure way.

With default value

Swapping variables without any temporary variable

In normal swapping, we need a temporary variable to swap two variable. Let’s see how we swap them using destructuring.

This is how destructuring helps in an array as well.

Smart way of passing function parameters

Sometimes, we have functions with a lot of parameters. Let’s take such a function in our example. Suppose, we have a function with a lot of parameters.

This is very traditional, or you can say bad way of writing function parameters.

One of the problems with this function is order of the parameters. In modern editors, we have smart IntelliSense feature, which can help us to remember the order of each parameter in a function. But, in case, where we don’t have IntelliSense feature, it is very hard to remember the order of the parameters with their default values.

Let’s say, we want to pass few parameters with keeping default values, so you would call the function like below, which looks ugly and not readable.

Now, let’s see how destructuring can help us the this problem. There is a very smart way of passing parameters without such hurdles. Take a look at the below code.

Pass parameters as an object

Let’s first create an object with all parameters as properties of this object, and pass this object in the function call.

Now, our smartFunc will automatically destructure the object properties in the function parameters. Cool!

Pass no parameters at all, use default parameters

In case, if you don’t want to pass any parameter, and use default values of the existing function, so call the function like below:

There is another way to get rid of {} in function call smartFunc({}) Let’s do a small change in our function declaration.

Summary

So, we see, how destructuring is very helpful in small cases. How smartly you can work with arrays, objects, and functions. Destructuring sneaks into your everyday use of the language, quietly making your code a bit shorter and cleaner all over the place.

Further Reading

Like this: Like Loading...