Destructuring is ES6 feature and its basically a way of unpacking values from an array or an object into separate variables. So in other words destructuring is to break a complex data structure down in to a smaller data structure like a variable.
I decided to create two separate articles one for array and another one for object destructuring but this article will covers Array destructuring.
Let's start with Array destructuring!
So for arrays we use destructuring to retrieve elements from array and store them in to variables in a very easy way. let's just start with a very simple array.
const juices = ['apple','orange','mango'];
For destructuring we are going to declare three new variables at the same time inside the square brackets that's because we are, destructuring an array.
const [appleJuice, orangeJuice, mangoJuice] = juices;
This is how we destructuring an array,Its looks like a Array but it's really not, it's just the destructuring assignment.
whenever javaScript sees this here on left side of the equal sign, it knows that it should do destructuring.
Let me explain how this works:-
// is equivalent to:
// const appleJuice = juices[0];
// const orangeJuice = juices[1];
// const mangoJuice = juices[2];
first variable appleJuice will be the first element of the array, second variable orangeJuice will be the second element of the array and the third variable mangoJuice will be the third element of the array.Now if we do console.log to see the output.
console.log(appleJuice); // output : apple
console.log(orangeJuice); // output : orange
console.log(mangoJuice); // output : mango
Always remember even though we did destructuring, but original array is of course not affected. we are only destructuring so we are unpacking it.
// original array
console.log(juices); // output: [apple,orange,mango]
Let's take some elements out of the variable juices ( by doing destructuring assignment).We do not want to take all of the elements out of the array. We will extract first two elements from array.
const juices = ['apple','orange','mango'];
const[appleJuice,orangeJuice] = juices;
console.log(appleJuice,orangeJuice); // output: apple orange
Did you see, it's simply follow the order of the elements here. Which are exactly the first two elements of the array.
Lets say we want extract only first and third element from array, to do this we simply leave a hole in the destructuring operator, So what I mean it will skip the second element in array and third element will become second element.
const juices = ['apple','orange','mango'];
const[appleJuice , , mangoJuice] = juices;
console.log(appleJuice,mangoJuice); // output: apple mango
Destructuring is a really powerful, we can do much more for example Swapping variables.
const fruits = ['apple','orange','mango'];
let [firstFruit , secondFruit] = fruits;
console.log(firstFruit,secondFruit); // output: apple orange
//Two variables values can be swapped in one destructuring expression
[firstFruit,secondFruit] = [secondFruit,firstFruit];
console.log(firstFruit,secondFruit); //output: orange apple
without destructuring we would have to do it like this, first we would need to create a temporary variable, then so that we would assign one of them.
const fruits = ['apple','orange','mango'];
let [firstFruit , secondFruit] = fruits;
// temporary variable
const favoriteFruit = firstfruit;
firstfruit = secondfruit;
secondFruit = favoriteFruit;
console.log(firstFruit,secondFruit); // output: orange apple
Another trick with destructuring is that we can have a function , return an array and then we can immediately destructure the result in to different variables. This is basically allows us to return multiple values from a function.
const restaurant ={
starterMenu:[ 'lemon Prawn','Grilled Scallops','Garlic Mussels'],
mainMenu: ['Pizza','Pasta','Risotto'],
order: function(starterIndex, mainIndex){
return[this.starterMenu[starterIndex],this.mainMenu[mainIndex];
}
}
// destructuring
const[ starter , main ] = restaurant.order(1,2);
console.log(starter, main) ; // output: Grilled scallops Risotto
Now next how to destructuring a nested array, the array inside another array let's take a example of nested array.
const nestedArray = [2,4,6,[8,10]];
// all the individual values ( have to do distructuring inside of destructuring)
const [a,b,c,[d,e]] = nestedArray;
console.log(a,b,c,d,e) ; // output:2 4 6 8 10
Default values
A variable can be assigned a default, in the case that the value unpacked from the array is undefined.
This can sometimes useful for example, when we get data from API.
// without default values
const [a , b , c ] = [8,10];
console.log(a,b,c): // output: 8 10 undefined
// with default values
const [a = 1, b = 2 , c = 1] = [8,10];
console.log(a,b,c): // output: 8 10,1
To learn more about javaScript Destructuring
See you guys! stay safe & keep coding........
Top comments (0)