”;
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.
”;