Destructuring
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Destructuring</title>
</head>
<body>
<!--
Destructuring assignment syntax : is an expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
Destructuring uses syntax same as arrays/objects, but on the left-hand side of the assignment to define what values to unpack from the sourced variable.
Destructuring makes it easy to extract only what is needed.
When destructuring arrays, the order that variables are declared is important.
-->
<h1>Demo : JavaScript Destructuring</h1>
<div>
<h2>Destructuring Arrays</h2>
<p id="para1"></p>
<p id="para2"></p>
<p id="para3"></p>
<p id="para4"></p>
</div>
<div>
<h2>Destructuring Objects</h2>
<p id="para5"></p>
<p id="para6"></p>
<p id="para7"></p>
<p id="para8"></p>
<p id="para9"></p>
<p id="para10"></p>
</div>
<!-- JavaScript code Starts here -->
<script>
/************************************************/
// Destructuring Arrays
//
let skills = ['htmlSkill', 'cssSkill', 'jscriptSkill']; // Array created
let [htmlSkill, cssSkill, jscriptSkill] = skills; // Destructuring Array
htmlSkill = 'Hypertext Markup Language';
cssSkill = 'Cascading Style Sheets';
jscriptSkill = 'JavaScript';
document.getElementById('para1').innerHTML =
`The original array "skills" = [${skills}]`;
document.getElementById('para2').innerHTML =
`The variable "htmlSkill" holds the value = ${htmlSkill}`;
document.getElementById('para3').innerHTML =
`The variable "cssSkill" holds the value = ${cssSkill}`;
document.getElementById('para4').innerHTML =
`The variable "jscriptSkill" holds the value = ${jscriptSkill}`;
/************************************************/
// Destructuring Objects
//
let skillzamUsers = {
name: 'Rohit',
email: 'rohit@example.com',
password: 'Pa$$w0rd',
birthYear: 1990
};
// Destructuring Object 'skillzamUser01'
let { name, email, password, birthYear } = skillzamUsers;
document.getElementById('para5').innerHTML =
`The variable "name" is of type "${typeof(name)}" and holds the value = ${name}`;
document.getElementById('para6').innerHTML =
`The variable "email" is of type "${typeof(email)}" and holds the value = ${email}`;
document.getElementById('para7').innerHTML =
`The variable "password" is of type "${typeof(password)}" and holds the value = ${password}`;
document.getElementById('para8').innerHTML =
`The variable "birthYear" is of type "${typeof(birthYear)}" and holds the value = ${birthYear}`;
name = 'Pooja'; // Change the value store in variable 'name'
document.getElementById('para9').innerHTML =
`The variable "name" is of type "${typeof(name)}" and holds the value = ${name}`;
// No change to the original Object 'skillzamUsers.name'
document.getElementById('para10').innerHTML =
`The variable "skillzamUsers.name" is of type "${typeof(skillzamUsers.name)}" and holds the value = ${skillzamUsers.name}`;
</script>
<!-- JavaScript code Ends here -->
</body>
</html>