Javascript is the language of the web and almost every website we use has some javascript in it. Today we will look at the destructuring of the arrays in javascript.
First, we need to understand what do we mean by Destructuring the array. Destructuring of javascript was introduced in ES2015 (ES6). It is a special type of syntax which allows us to extract the data from an array or objects. We can extract many elements from the array or objects using destructuring the array. let us look at the examples.
const arr = [20,34,22];
in the above code snippet, we declared an array with name arr with some values in it, now if we have to assign these values into the variables, traditionally we would use the following syntax.
let a = arr[0];
let b = arr[1];
let c = arr[2];
But in the ES6 javascript introduced us to array destructuring, by using that simple syntax.
Basic Array Destructuring
const [a,b,c] = arr;
console.log(arr);
this will make three variables in javascript and will assign values to them too. the output of the above example will be
a= 20; b= 34; c = 22;
If we need to skip some values then we have to skip that value in the array destructuring syntax.
let [a, , b] = arr;
console.log(a, b);
the output will be a=20 and b = 22. they will skip the 34 in this process. Let's make an object and learn more from this.
const restaurant = {
name: 'Matini Kitchen',
address : 'Dadar, Mumbai',
categories : ['south indian', 'north indian','itallian','Chinese'],
starterMenu : ['soup','dahi-vada','onion salad','green salad'],
mainMenu:['paneer butter masala', 'Malai Kofta', 'Onion Sabji', 'Malai 2 Pyaza'],
order: function(starterIndex, mainIndex){
return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]);
}
openingHours: {
thu: {
open: 12,
close: 22,
},
fri: {
open: 11,
close: 23,
},
sat: {
open: 0, // Open 24 hours
close: 24,
},
}
Suppose we have to choose two categories for the food items. Currently, we have 4 categories if we want to select main and secondary food categories for some purpose. so how we can do that is by doing this.
const [main, secondary] = restaurant.categories;
console.log(main,secondary);
if look at the console we will get the following output.
South Indian, north Indian.
Interchange the value
suppose if we want to give main value to secondary and secondary value to main then traditionally we would have required third variable to do so. this is how we will do it in the older way.
const temp = main;
main = secondary;
secondary = temp;
But it can be done easily by array destructuring.
let [main, secondary] = [secondary,main]
Receive two return values from the function
in the above example, the restaurant variable has one object method called to order. in which we pass the index value of the starter menu and main menu by array destructuring we can get two return values from this function.
const [starter, mainCourse] = restaurant.order(3,1);
console.log(starter, mainCourse);
in this above example, we will get index number 3 from restaurant.starterMenu which is a green salad and index number 1 from restaurant.mainMenu. which is Malai Kofta.
Nested Destructuring
It is possible to destructure nested arrays and objects. here we will talk about arrays only.
const nested = [2, 4, [5, 6]];
const [f1, , f2] = nested;
console.log(f1, f2);
in the above situation, we will get the value in variable f1 is 2 and in f2 we will get the array [5,6]. We can also assign variables to the nested array. for example
const [i, , [j, k]] = nested;
console.log(i, j, k);
in this example, we will get the following values in the variables i,j, and k will be 2,5,6 respectively.
Default Value in Destructing Array.
In some cases it is possible that the array on which we are taking the values does not have values in them in this case we can give them default values too.
const [p = 1, q = 2, r = 3] = [8, 9];
console.log(p, q, r);
In this case, p and q will have values 8 and 9 and r will have a default value in it.
We will talk about object destructuring in another post.