JavaScript - Destructuring Assignment

Destructuring Assignment

In JavaScript, the destructuring assignment is an expression that allows us to unpack the values from the arrays or objects and store them in individual variables. It is a technique to assign array values or object properties to the variables.

The destructuring assignment syntax is introduced in ECMAScript 6 (ES6). Before ES6, developers were unpacking the object properties manually as shown in the example below.

Array unpacking before ES6

In the example below, the 'arr' array contains the fruit names. After that, we created different variables and assigned array elements to the variables.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = ["Apple", "Banana", "Watermelon"];

      const fruit1 = arr[0];
      const fruit2 = arr[1];
      const fruit3 = arr[2];

      document.getElementById("output").innerHTML = 
      "fruit1: " + fruit1 + "<br>" +
      "fruit2: " + fruit2 + "<br>" +
      "fruit3: " + fruit3;
   </script>
</body>
</html>

Output

fruit1: Apple
fruit2: Banana
fruit3: Watermelon

The above code will work if the array doesn't contain the dynamic number of elements. What if the array contains 20+ elements? Will you write 20 lines of the code?

Here the concept of the destructuring assignment comes into the picture.

Array Destructuring Assignment

You can follow the syntax below to use destructuring assignment to unpack array elements.

const [var1, var2, var3] = arr;

In the above syntax, 'arr' is an array. The var1, var2, and var3 are variables to store array elements. You can also similarly unpack the objects.

Example

The below example implements the same logic as the above example. Here, we have used the destructuring assignment to unpack the array elements. The code gives the same output as the previous example.

<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = ["Apple", "Banana", "Watermelon"];

      const [fruit1, fruit2, fruit3] = arr;

      document.getElementById("output").innerHTML = 
      "fruit1: " + fruit1 + "<br>" +
      "fruit2: " + fruit2 + "<br>" +
      "fruit3: " + fruit3;
   </script>
</body>
</html>

Output

fruit1: Apple
fruit2: Banana
fruit3: Watermelon

Example: Nested Array Destructuring

In the example below, we created a nested array. To access these elements, we used nested array destructuring assignment. Try the following example

<html>
<body>
   <p id = "output"> </p>
   <script>
      const arr = ["Apple", ["Banana", "Watermelon"]];
      const [x, [y, z]] = arr;
      document.getElementById("output").innerHTML = 
      x + "<br>" +
      y + "<br>" +
      z ;
   </script>
</body>
</html>

Output

Apple
Banana
Watermelon

Object Destructuring Assignment

You can follow the syntax below to use destructuring assignment to unpack object elements.

const {prop1, prop2, prop3} = obj;

In the above syntax, 'obj' is an object. The prop1, prop2, and prop3 are variables to store object properties.

Example

The below example implements the same logic as in the example of array destructuring assignment. Here, we have used the destructuring assignment to unpack the object elements.

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <script>
      const fruit = {
         name: "Apple",
         price: 100,
      }

      const {name, price} = fruit;
      document.getElementById("output1").innerHTML = "fruit name: " + name;
      document.getElementById("output2").innerHTML = "fruit price: " + price;

   </script>
</body>
</html>

Output

fruit name: Apple
fruit price: 100

Example: Nested Object Destructuring

In the example below, we defined a nested object called person with two properties age and name. The name property contains two properties called fName and lName. We access these properties using nested destructuring.

<html>
<body>
   <div id = "output"> </div>
   <script>
      const person = {
         age: 26,
         name: {
            fName: "John",
            lName: "Doe"
         }
      }
      // nested destructuring 
      const {age, name: {fName, lName}} = person;
      document.getElementById("output").innerHTML = 
      "Person name: " + fName + " " + lName + "<br>"+
      "Person age: " + age;
   </script>
</body>
</html>

Output

Person name: John Doe
Person age: 26

What's Next?

In the next chapters, we will learn the below concepts in detainls.

• Array destructuring − Unpacking the array elements.

• Object destructuring − Unpacking the object properties.

• Nested destructuring − Unpacking the nested array elements and nested objects.