What is JavaScript object Destructuring?


In this artcle we are going to learn what is JavaScript object Destructing with suitable examples in JavaScript.

JavaScript Object Destructuring is an expression which allows us to access the data from objects like arrays, objects, maps and assign it to new variables. Through this object destructuring, we can create variables easily from the object’s properties. The Destructuring assignment employs syntax which is like that of an array. The difference is on the left-hand side of assignment. We need to specify the values that are to be unpacked from the supplied variable.

To get a better understanding of this concept, let’s look into the syntax and usage of JavaScript object destructing in JavaScript.

Syntax

The syntax for Javascript Object Destructuring is −

const [a,b] = array;
const [a,b…t] = array;

const {a:a1,b:b1} = obj;
const {a:a1, b:b1,…..t:t1} = obj

Consider an example −

const array = [1,2,3,4,5];

The destructuring assignment for the above array can be −

const [a,b] = array; // a : 1 , b :2 (values of a,b)

Example 1

Object destructuring

This is an example program to illustrate the difference between the use of ‘with object destructuring’ and ‘without object destructuring’.

Through Object destructuring, an object property can be used directly by assigning it to a new variable instead of calling the object name everytime.

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Object Destructuring</title>
</head>
<body style="text-align: center ;">
   <p>JavaScript Object Destructuring</p>
   <p id="obj-dest"></p>
   <script>
      const employee = {
         'name': 'Rajesh',
         'company': 'Tutorials Point',
         'employee-id': 102
      }
      const output1 = employee.company; // Without Object Destructuring
      const {company} = employee;
      const output2 = company; // WIth Object Destructuring
      document.getElementById('obj-dest').innerHTML = "Without Object Destructuring "+ '<br/>' + " Employee working company : "+output1+"<br/>"+"<br/>"+"With Object Destructuring "+ '<br/>' + " Employee working company : "+output2;
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Example 2

accessing single or multiple variables

Through Object Destructuring, we can extract a single or multiple variables from an object. Following is an example to do so.

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Object Destructuring</title>
</head>
<body style="text-align: center ;">
   <p>JavaScript Object Destructuring</p>
   <p>Accessing more than one attributes from an object using Object Destructuring</p>
   <p id="obj-dest"></p>
   <script>
      const employee = {
         'name': 'Rajesh',
         'company': 'Tutorials Point',
         'role' : 'Software Engineer',
         'employee-id': 102
      }
      const {name,company,role} = employee; // Accessing more than one attribute from an Object
      document.getElementById('obj-dest').innerHTML = "Employee name : "+ name +'<br/>'+ "Employee Company : "+ company +'<br/>'+"Employee role : "+ role;
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Example 3

Assigning new variables

Through Object Destructuring, we can assign new variables to an object and place default values. Following is an example to do so.

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Object Destructuring</title>
</head>
<body style="text-align: center ;">
   <p>JavaScript Object Destructuring</p>
   <p>Assigning new variables and placing default values using Object Destructuring</p>
   <p id="obj-dest"></p>
   <script>
      const employee = {
         'name': 'Rajesh',
         'company': 'Tutorials Point',
         'role' : 'Software Engineer',
         'employee-id': 102
      }
      const {name,company,salary = 40000} = employee;
      document.getElementById('obj-dest').innerHTML = "Employee name : "+ name +'<br/>'+ "Employee Company : "+ company +'<br/>'+"Salary : "+ salary;
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Updated on: 09-Dec-2022

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements