Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to unpack array elements into separate variables using JavaScript?
Unpacking array elements (also called array destructuring) means assigning array element values to separate variables. We can assign every element to separate variables, or we can assign some elements while skipping others. 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, variable a contains the value of element1, b contains the value of element2, c contains the value of element3, and d contains the value of element4.
Example 1: Basic Array Destructuring
In the example below, we define an array and unpack its elements into separate variables. We show the initial values of variables and their final values after destructuring.
<html>
<body>
<h2>Unpacking array elements <i>into 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 array1 are: " + array1 + "<br/>";
output.innerHTML += "Initial values - a: " + a + ", b: " + b + ", c: " + c + "<br/>";
[a, b, c] = array1;
output.innerHTML += "After unpacking - a: " + a + ", b: " + b + ", c: " + c + "<br/>";
</script>
</body>
</html>
The elements of array1 are: 10,20,30 Initial values - a: 40, b: 100, c: 50 After unpacking - a: 10, b: 20, c: 30
Example 2: Direct Declaration and Assignment
In this example, we directly unpack array elements into separate variables during variable declaration. This is more concise than the previous approach.
<html>
<body>
<h2>Direct unpacking during variable declaration</h2>
<div id="output"></div>
<script>
var output = document.getElementById('output');
let [var1, var2, var3] = ["Hi", "Hello", "Welcome"];
output.innerHTML += "Values after unpacking - var1: " + var1 + ", var2: " + var2 + ", var3: " + var3 + "<br/>";
</script>
</body>
</html>
Values after unpacking - var1: Hi, var2: Hello, var3: Welcome
Example 3: Skipping Array Elements
We can skip elements from any array index by leaving empty spaces between commas. This allows us to selectively pick elements from specific positions.
<html>
<body>
<h2>Skipping array elements while unpacking</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 += "Initial values - a: " + a + ", b: " + b + ", c: " + c + ", d: " + d + "<br/>";
// Skipping elements by leaving empty spaces
[a, , b, , c, , d] = [10, 20, 30, 40, 50, 60, 70, 80, 90];
output.innerHTML += "After unpacking (skipped elements) - a: " + a + ", b: " + b + ", c: " + c + ", d: " + d + "<br/>";
}
</script>
</body>
</html>
Initial values - a: undefined, b: undefined, c: undefined, d: undefined After unpacking (skipped elements) - a: 10, b: 30, c: 50, d: 70
Example 4: Default Values
We can assign default values to variables while unpacking array elements. If the array contains fewer elements than variables, the variables initialize with their default values.
<html>
<body>
<h2>Assigning default values while unpacking</h2>
<div id="output"></div>
<button onclick="unpackElements()">Unpack array elements</button>
<script>
var output = document.getElementById('output');
function unpackElements() {
output.innerHTML = "";
// Using default values
[a = 500, , b = 500, , c = 500, , d = 500] = [10, 20, 30, 40, 50];
output.innerHTML += "After unpacking with defaults - a: " + a + ", b: " + b + ", c: " + c + ", d: " + d + "<br/>";
}
</script>
</body>
</html>
After unpacking with defaults - a: 10, b: 30, c: 50, d: 500
Key Features
| Feature | Syntax | Use Case |
|---|---|---|
| Basic Destructuring | [a, b, c] = array |
Unpack all elements |
| Skipping Elements | [a, , c] = array |
Skip specific positions |
| Default Values | [a = 10, b = 20] = array |
Handle missing elements |
Conclusion
Array destructuring is a powerful ES6 feature that makes unpacking array elements into separate variables simple and readable. You can skip elements and assign default values for more flexible array handling.
1K+ Views
