What is JavaScript object Destructuring?

JavascriptObject Oriented ProgrammingFront End Technology

JavaScript object Destructuring

Accessing an object in a different unmannered structure is nothing but object destructuring. Actually, we have a specified format to display an object property. We can do the same thing in an unspecified manner called Object Destructuring. Let's discuss it in detail.

Example-1

In the following example, an object 'person' is defined and its property is accessed in a normal manner, that is "person.name". But if we need to display the same in a destructured way we no need to specify 'person.name', just 'name' is enough as shown in Example-2.

Live Demo

<html>
<body>
<script>
   let person = {name: "Nani", age: 25};
   document.write(person.name);
   document.write("</br>");
   document.write(person.age);
</script>
</body>
</html>

Output

Nani
25


Example-2

In this example, the property of the object 'person' is accessed in a destructured manner and the result is displayed in the output.

Live Demo

<html>
<body>
<script>
   let person = {name: "Nani", age: 25};
   let {name, age} = person;
   document.write(name);
   document.write("<br>");
   document.write(age);
</script>
</body>
</html>

Output

Nani
25
raja
Published on 01-Aug-2019 15:34:37
Advertisements