- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
De-structuring assignment in JavaScript.
De-structuring assignment is a form of special syntax allows us to destructure objects properties, or array values and later assign them to different variables.
Following is the code for the destructuring assignment in JavaScript −
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample,.result { font-size: 18px; font-weight: 500; color: red; } .result { color: rebeccapurple; } </style> </head> <body> <h1>De-structuring assignment in JavaScript</h1> <div class="sample"></div> <div class="result"></div> <button class="Btn">CLICK HERE</button> <h3>Click on the above button to destructure the array and object above</h3> <script> let sampleEle = document.querySelector(".sample"); let resultEle = document.querySelector(".result"); let arr = [2, 3, 4, 5]; let obj = { firstName: "Rohan", lastName: "Sharma", }; sampleEle.innerHTML = "arr = " + arr + "<br>"; sampleEle.innerHTML += "obj = {firstName:'Rohan',lastName:'Sharma'}"; let a, b; [a, b] = arr; let { firstName, lastName } = obj; document.querySelector(".Btn").addEventListener("click", () => { resultEle.innerHTML = `a=${a} b=${b} <br>`; resultEle.innerHTML += `firstName=${firstName} lastName=${lastName}`; }); </script> </body> </html>
Output
The above code will produce the following output −
On clicking the ‘CLICK HERE’ button −
- Related Articles
- Array De-structuring in JavaScript.
- Object de-structuring in JavaScript.
- Nested de-structuring in JavaScript.
- De-structuring an object without one key
- Short Circuit Assignment in JavaScript
- What is the use of backbone.js in structuring javascript?
- What are Assignment Operators in JavaScript?
- What is Assignment Operator (=) in JavaScript?
- What is Multiplication Assignment Operator (*=) in JavaScript?
- What is Addition Assignment Operator (+=) in JavaScript?
- Structuring Python Programs
- What is Bitwise OR Assignment Operator (|=) in JavaScript?
- What is Bitwise XOR Assignment Operator (^=) in JavaScript?
- How to swap variables using Destructuring Assignment in JavaScript?
- Explain about add and assignment(+=) operator in detail in javascript?

Advertisements