Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
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
How to unpack array elements into separate variables using JavaScript?
Unpacking array elements means assigning array element values to the new variables. We can assign every element to the separate variables, or we can assign some elements to the separate variables, and for the remaining elements, we can create a new array. In this tutorial, we will learn to unpack array elements into separate variables using JavaScript.
Syntax
Users can follow the syntax below to unpack the array elements into separate variables.
let array = [element1, element2, element3, element4]; let [a, b, c, d] = array;
In the above syntax, a variable contains the value of element1, b contains the value of element2, c contains the value of element3, and d variable contains the value of element4.
Now, we will look at the various examples of unpacking array elements into separate variables using JavaScript.
Example 1
In the example below, we have defined the array1 and initialized it with some numeric values. Also, we have defined the a, b, and c variables to unpack array elements into that. After that, we used the above syntax to destruct the array elements into separate variables.
In the output, users can observe the initial values of the a, b, and c variables and the final values after we have unpacked array elements into them.
<html>
<body>
<h2>Unpacking the array elements <i> to separate variables </i> using JavaScript. </h2>
<div id = "output"> </div>
<script>
var output = document.getElementById('output');
let array1 = [10, 20, 30];
let a = 40;
let b = 100;
let c = 50;
output.innerHTML += "The elements of the array1 are " + array1 + " <br/>";
output.innerHTML += "The initial values of the a, b, and c variables are a : " + a + " b : " + b + " c : " + c + " <br>";
[a, b, c] = array1;
output.innerHTML += "The values of the a, b, and c variables after unpacking the array elements are a : " + a + " b : " + b + " c : " + c + " <br>";
</script>
</body>
</html>
Example 2
In this example, we directly unpack the array elements into separate variables while declaring the new variables. Users can observe how we declare multiple variables and unpack an array by directly assigning the array to variables rather than assigning the array variable.
<html>
<body>
<h2>Unpacking the array elements <i> to separate variables </i> using JavaScript. </h2>
<div id = "output"> </div>
<script>
var output = document.getElementById('output');
let [var1, var2, var3] = ["Hi", "Hello", "Welcome"];
output.innerHTML += "The values of the var1, var2, and var3 variables after unpacking the array elements are var1 : " + var1 + ", var2 : " + var2 + ", var3 : " + var3 + " <br>";
</script>
</body>
</html>
Example 3
In the example below, when users click the button, it will invoke the unpackElements() function. In the unpackElements() function, we destruct the array. Also, we skipped some elements from the array while unpacking array elements into separate variables.
Users can see that we can add space by comma separating to skip elements from any array index.
<html>
<body>
<h2>Skipping some array elements while unpacking them <i> into separate variables </i> using JavaScript. </h2>
<div id = "output"> </div>
<button onclick="unpackElements()">Unpack array elements</button>
<script>
var output = document.getElementById('output');
function unpackElements() {
let a, b, c, d;
output.innerHTML += "The initial values of a, b, c, d variables are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
// Skipping the elements
[a, , b, , c, , d] = [10, 20, 30, 40, 50, 60, 70, 80, 90];
output.innerHTML += "The values of the a, b, c, and d variables after unpacking the array elements are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
}
</script>
</body>
</html>
Example 4
In the example below, we will learn to assign default values to the variables while unpacking array elements. We have assigned 500 as the default value of all variables. If the array contains fewer elements than total variables, the variable initializes with the default values.
In the output of the example below, we can see that value of d is 500, which is the default value.
<html>
<body>
<h3>Assigning the default values to the variables while unpacking array elements <i> to separate variables </i> using JavaScript </h3>
<div id = "output"> </div>
<button onclick="unpackElements()">Unpack array elements</button>
<script>
var output = document.getElementById('output');
function unpackElements() {
let a, b, c, d;
output.innerHTML += "The initial values of a, b, c, d variables are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
// Skipping the elements
[a = 500, , b = 500, , c = 500, , d = 500] = [10, 20, 30, 40, 50];
output.innerHTML += "The values of the a, b, c, and d variables after unpacking the array elements are a : " + a + ", b : " + b + ", c : " + c + ", d : " + d + "<br/>";
}
</script>
</body>
</html>
We have learned array destructuring, which was introduced in the ES6 version of JavaScript. We have seen four examples representing the array elements unpacking use cases.
Users learned to skip elements and assign default values to the variables while unpacking the array elements.
687 Views
