There is one fact that nobody can deny- everything , once built, can be destroyed. This concept also applies to programming. In this article, I will be discussing destructuring in JavaScript.
In JavaScript, destructuring is when you decompose the properties of an object or the indexes of an array to separate them to create specific variables. This does not mean that these separated objects or arrays can never be used again in the program.
Before we begin, however, I will quickly outline some important differences between arrays and objects. Arrays have number indexes and objects have string indexes. In addition, arrays and objects use different syntax.
In JavaScript, we can put objects in arrays and arrays in objects too, the syntax let us put everything where we want.
Now let's talk about the main subject, the destructuration. Destructing an object or an array doesn't mean that you will erase it from the program and can't ever use it again, it means that you'll get a specific part of it. Let's use examples, with Axios, a famous library. We can do an HTTP request (like with Fetch API or XmlHttpRequest) which returns us the following object's schema:
We'll stick to the data property! It's an object that contains all the server's response data. Let's say that we want to get all our users from our NodeJS API with MongoDB database, we may do something similar to the following code.
In this case, the req constant will be an object with the same schema as seen before. So to get the users data, we has the req.data containing our array of users.
Now that we saw how to perform an Axios request, let's say that we only want one user that we can get from the route /api/users/:userid. For instance if the wanted user's id is 7, we do a request to /api/users/7. But what if the API returns an array? Then we can do req.data[0] which can be a good way to do it but not as practical as if we used destructors…
First, let's get the data object. We can do req.data but we don't care about others req's properties so let's only get data. What we will do is an object destructuring assignment. (Finally, some excitment)
Yes, we only got the data property and it created an object named data! And you've done a "destructuring assignment" in JavaScript, great!
For instance we can destruct multiple properties in the same destructuring assignment, Axios provide a status property so let's get it by destructuration!
We can also give default values to any destructed property like bellow.
Default value to a destructed propertyBut our object's name isn't what we really wanted, we want a users object to become easier to understand. So let's do a name's assignation without creating any more new variables.
It's cool right? You can assign destructed properties to new variable's name in the same line and it doesn't look bad at all! So now we have our well named users object.
Still, users keep being an array, what could we do with it? I present you, the array's destructing assignment:
Destructing assignment with an arrayIn this case, a is a new constant which will receive the index 0 of the array [1, 2, 3] (Which has the value 1). The constant declaration's position in the destructing assignment define the selected index that will have it's value taken.
In this case, a is a new constant which will receive the index 0 of the array [1, 2, 3] (Which has the value 1). The constant declaration's position in the destructing assignment define the selected index that will have its value taken.
Like for objects, we can have default values and multiple declarations. Their position always match the selected array's indexes.
We can also bypass any indexes we want by putting a , without any variable declaration. In the following case we will bypass the indexes 0 and 1 (2 comas). c will be equal to the third index which have a value of 6.
Bypassing indexes in an array's destructing assignmentNow that we know how to use array's and object's destructing assignment, we finally could resolve our case of the variable users being an array with only one index.
We can use destructing assignments inside one another and it will works. So put an array's destructuring assignment in an object's destructuring assignment and you'll get the same result on the selected property:
To sum up, we've destructed the property data of the axios.get('/api/users/7') instruction's. Next we assigned data to a proper variable's name, users. After that we used the array's destructing assignment to define the variable users as the first index of the data property.
Every destructuring assignment can be used recursivly like seen previously, in any order you want. Object's destructuring assignment can be used in others object's destructuring assignment and same goes for array's destructuring assignment.
Now we perfectly know how to destructs objects and arrays in JavaScript. But there's another trick you can do with destructive assignments, the " rest pattern" or "spreading". This give you the possibility to take the remaining undestructed properties/indexes to a new variable. Here's a demonstration with arrays but you can do the same with objects :
Thanks you for reading, hope that now you know everything about destructuring in JavaScript!
Top comments (4)
Great job explaining, Nathanael! Many thanks
BTW there are few moments in the article ("Default value to a destructed property", "Bypassing indexes in an array's destructing assignment") that seem to be intended as subsections titles (they are descriptive phrase equivalents) that seem to be lacking proper styling and, most of all, a space at the end, so they concatenate with actual paragraph content.
Otherwise it's great, keep it up! <3
Huh, I don't know if it was intentionally funny, but destruction !== destructuring. It's not "destruct" as in "wipe out", it's "destructure" as in "disassemble".
Yup, it was a mistake, thanks you! 😄
Can't thank you enough!