JavaScript ES6:Destructuring for Beginners

Introduction

In this tutorial, our main focus will be on learning how to equip ourselves with the new feature of ES6 and infact, it became every developer’s goal to harness the power of destructuring to simplify our JavaScript programs. Before, we start exploring about the destructuring, why should we considered this. if you are already using JavaScript or its modern framework(s)/libraries like Angular, React, Vue, etc., you may already be aware of ES6 feature(s) and destructuring. However, there is a possibility that by reading this tutorial, you may learn a few new things about destructuring you may not have known before or you have used but not understood well.

You may use to test the code snippets on Codepen or Babel or your favorite online JavaScript online editor.

Why Destructuring?

Many times most of us might have come across the scenario where you have to get some data/properties from the object/array and display on page.

Before the ES6 destructuring, how we usually handle object as given below,

And below is a code snippet for a scenario where how we handle an array.

With above code snippet, we get our desire result as we have extracted data from array/object and that we all doing over and over again.

Now imagine that, you are working on big application and you are getting this type of scenario frequently so this could be tedious and cumbersome to manage and that's where the destructuring can do the same in a more expressive and compact syntax.

Now lets explore ES6 destructuring assignment, that serve you better! and will look for both types(object and array).

What is Destructuring?

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. as per MDN Docs

Destructuring simply breaking down complex object/array into smaller/required parts/fragments. so let’s take a look at how we can handle above scenario with ES6 destructuring.

Object Destructuring

“The destructuring assignment uses similar syntax, but on the left-hand side of the assignment to define what values to unpack from the sourced variable.” MDN Docs

Below snippet shows how we can break the object and get desire values from the object.

Above example show basic destructuring for object and let’s see some more examples with different scenarios that comes frequently in our day to day life when code using JavaScript.

Default Values and New or Different Variable Name

Often, we got to know the object contained specific keys before using a particular key value from object. But what if we try accessing a non-existing key in a destructured object? yes, you are right, it will cause the value undefined to be assigned instead. For this type of situation you can pass default values so that will be assigned to such non-existing keys instead of undefined.

1. No default value assigned

2. Assigned default values

We assigned default values to the age and country variables. As they didn’t originally exist on the person object, 30 and India are returned from the age and country variables respectively instead of undefined.

3. Different Variable Names

A property can be both — MDN Docs

• Unpacked from an object and assigned to a variable with a different name.
• Assigned a default value in case the unpacked value is undefined.

Swap two variables

If we try to swap two variable without destructuring, it may require temporary variable or some tricky calculation or bitwise operation. But with destructuring we can easily swapped two variables. As given below,

Ignoring values or assign rest of an array values to a variable

Sometime you don’t want some values so you can easily ignore or you can ignore all the values

Nested Object Destructuring

Let’s start again, remember our first example that we have destructured? Yes, that contains what is called nested object(object contains one or more objects).

Here, we have extracted the street, postalCode, city and country from the nested object easily. Also we can store them in different variable if require.

Array Destructuring

As we have already seen some actual use cases of object destructuring, I am very confident that you get enough knowledge about the same.

Array destructuring is very similar and straight forward, you use an array literal on the left-hand-side of an assignment expression. Each variable name on the array literal maps to the corresponding item at the same index on the destructured array. so let’s get start to understand with basic example.

In this example, we have assigned the items in the arr array to three local variables: A, B and C using array destructuring. Notice that each variable is mapped to the corresponding item at the same index on the arr array.

Default Values and Skipping Items

We can assign default values to variables in case value extracted from a array is undefined.

It is also possible to skip some items you don’t want to assign to variable from destructuring and only assign those require and use comma (,) to omit the items.

Nested Array Destructuring

As done with objects, you can also do nested destructuring with arrays. The corresponding item must be an array in order to use a nested destructuring array literal to assign items in it to local variables as given below.

Using Rest Operator

Sometimes, you may need some items to specific variables and at the same time you also need remaining items not in separate variables but in single variable. What it means is that the rest items pick up the remaining items excepts already picked up from object. The rest parameters (…param) another new feature added in ES6 helps to achieve this as given below.

Cloning Arrays

In JavaScript, arrays are reference types and hence they are assigned by reference instead of being copied as values. So in the following snippet, both the arr and the arrClone variables point to the same array reference in memory and hence any change made to arr is also applied to arrClone and vice-versa.

You can use array destructuring and rest parameter to clone and create new array.

Conclusion

As you have made it to the end of this article and we have explored the ES6 destructuring of object and array with various ways and examples that we can apply in our code. I am very sure that you may have learnt a few new stuffs from this article.

Thank you for reading this article and happy coding!.