You might have come across a concept called destructuring in JavaScript. For those out there who are not familiar with this concept, this article series is for you. 😄
I have already explained the what and why of destructuring in my previous article here. In this article, we will jump directly towards learning array destructuring.
Let's start with an example.
const userDetails = ["Apurva", "Sawant", "BMW"];
How would you assign all the array elements to variables?
Before destructuring, you would have done something like this
const firstName = userDetails[0] // Apurva
const lastName = userDetails[1] // Sawant
const car = userDetails[2] // BMW
Do you see how much code is repeating? And this will get painful if you have a huge array.
Let's see how the magic of destructuring now,
const userDetails = ["Apurva", "Sawant", "BMW"];
const [firstName, lastName, car] = userDetails;
console.log(firstName) // Apurva
console.log(lastName) // Sawant
console.log(car) // BMW
Pretty concise right 🤯?
So, what is happening behind the scenes?
JavaScript engine will check both sides of the assignment and pair each of the elements on the right side with other corresponding elements on the left side. They are paired based on their corresponding positions ( 0th = 0th, 1st = 1st...)
You can also declare variables separately and destructure them later like below.
let firstName, lastName, car;
[firstName, lastName, car] = userDetails;
How to directly destructure an Array?
Javascript provides a way to directly destructure the array elements on the same line.
const [firstName, lastName, car] = ["Apurva", "Sawant", "BMW"];
console.log(firstName); // "Apurva"
console.log(lastName); // "Sawant"
console.log(car); // BMW
What if I want to skip some elements of the array 🤔?
Let's say for some reason you don't want to destructure the second element (the lastName in our case), then you can write two back-to-back commas to skip that element.
const [firstName, , car] = userDetails;
console.log(firstName) // Apurva
console.log(car) // BMW
This will tell the Javascript engine to skip the element at that particular index.
Rest operator and Array destructuring
If you want to assign the rest of the array element to a variable, you can use the rest operator.
const [firstName, ...otherDetails] = userDetails;
console.log(firstName) //Apurva
console.log(otherDetails) // ["Sawant", "BMW"]
Here, the value at the 0th index will be assigned to our firstName variable and all the remaining values will be assigned to the variable otherDetails as an array.
Note: The rest operator should always be used as the last item of your destructuring array to avoid getting a SyntaxError.
How default values work with Array Destructuring
If you want to extract an element that does not exist or might have the value undefined, then you can go ahead and set a default value for that element.
Here's how you can set a default value,
const [car = "BMW", company = "Stark Industries"] = ["Tesla"];
console.log(car) // BMW
console.log(company) // Stark Industries
As you can see, we only have one index on the right-hand side. Hence, the car variable was assigned with the value at the 0th index. Here, the default value is ignored since there is a value present for that index on the right side whereas the default value for company was picked up.
Swapping made easy
Array destructuring is the easiest way to swap variables. Let's have a look
let firstName = "Apurva";
let lastName = "Sawant";
[firstName, lastName] = [lastName, firstName];
console.log(firstName) // Sawant
console.log(lastName) //Apurva
Here, we have directly used array destructuring to reassign the variables with the values on the right-hand side.
Destructuring array in function parameters
const userDetails = ["Apurva", "Sawant", "Stark Industries"]
function getDetails([firstName, lastName, company]){
return `${firstName} ${lastName} works at ${company}`
}
console.log(getDetails(userDetails))
// Apurva Sawant works at Stark Industries
Here, we have passed the entire array to the function and then the array is destructed in the function parameters. Notice the square brackets in the function parameters
Parting Thoughts
In this article, we learned how to destructure an array and write clean and concise code.
I hope you enjoyed this article. Thanks for reading 😄.