Array destructuring is an efficient way to extract multiple values from data that’s stored in an array.
In this tutorial we’ll learn about array destructuring. We'll go over examples to learn the ins and outs of how array destructuring works.
I've also created a video of this tutorial:
Let's get started.
How to Destructure Elements from an Array
Next we will create an array, called animals, and add values of dog, cat, and horse.
const animals = ['Dog', 'Cat', 'Horse']
Next, say that we want to create a variable with just the value of dog. We'll call this variable
dogVar, short for dog variable. Before array destructuring was introduced in ES6, we would do this:
dogVar = animals
Next say we want the value of cat and horse in their own variables as well. We would say:
const catVar = aniamls
const horseVar = animals
Here we’ve written 3 separate lines of code. Let’s use array destructuring instead, and write 1 line of code instead of 3.
How Destructuring Works
With array destructuring, we could write out just 1 line of code:
const [firstElement, secondElement, thirdElement] = animals
This looks like we are creating an array here, but we are not. We are destructuring this array. Destructuring makes it possible to unpack values from arrays into distinct variables.
Destructuring takes each variable on the array on the left-hand side and maps it to the element at the same index in the
When we write out
firstElement, we are saying we want to get access to the first element in the animals array and assign it to the variable of
secondElement, we are saying we want to get access to the second element in the array and assign it to the variable of
secondElement. The same thing goes for the
The key takeaway here is that these names
[firstElement, secondElement, thirdElement] don’t matter. What matters is the order.
Looking at the order of our destructuring will tell us what elements in the array are assigned to what variables.
Let's look at our 1 line of code where we destructure the array. Let's picture this part of it
[firstElement, secondElement, thirdElement] to be an array.
If this were an array,
firstElement would be at position
firstElement variable is at position
0, then it will go into the
animals array and find the element that's at position
0, and assign that element to the variable
(Keep in mind that arrays are zero-indexed, which just means we start counting them at 0 instead of 1.)
When destructuring, we can give our variables any name we want. Again, order is what matters, not the naming. If we wanted to, we could write:
const [dog, cat, horse] = animals
Now we have all of our values. If we write out
dog, cat, horse, we can see we get all of the variable names with the correct values:
dog // returns 'Dog'
cat // returns 'Cat'
horse // returns 'Horse'
If we go back to our code at the start of this example, we had 3 lines of code to create variables for dog, cat, and horse. With array destructuring, we use just 1 line of code. Destructuring is just a shortcut. It's an easy, quick way to extract multiple values from an array.
But what if you only want to get one element from an array, say the second or third element in an array, and store that element in a variable?
How to Destructure the Second or Third Element in an Array
Next, let's say we have an array, fruits:
const Fruits = ['banana', 'apple', 'orange']
What if we want to get just the value of apple, and assign it to the variable name of apple?
We can’t just do
const [apple] = animals. Why not? If we do, then the variable
apple will incorrectly have the value of
'banana' assigned to it. Why is this?
This is because again, order matters. With
apple, sees that it is at position
0, and then finds the element at position 0 in the
fruits array, which is
'banana', and assigns that element to the variable of apple.
We don't want this to happen. So what do we do?
Instead, we can write:
const [, apple] = fruits
apple variable is now the second element here. In other words,
apple is now at position
Say we just wanted the value of
orange in a variable, and we don't care about the apple or banana elements. We could again use commas like so:
const [, , orange] = fruits
If we write out
orange in our console, we see that we successfully created the orange variable and it has the value of
One last thing to note is that if you learn React, you'll likely use array destructuring often with React hooks. For example, you might see something like this:
const [count, setCount] = useState(0)
There we go. We've learned all about array destructuring.
Thank you for reading!
If you enjoyed this post, join my coding club, where we tackle coding challenges together every Sunday and support each other as we learn new technologies.
If you have feedback or questions on this post, or find me on Twitter @madisonkanna.