What is meant by Destructuring?
Destructuring is a fast and easy way to access variables from arrays and objects. It just takes values from arrays and properties from objects and sends them as local variables. This would result in your code being more concise and readable.
Array Destructuring
Look at this code. Looks very repetitive and not very elegant. With destructuring, we can do the same thing but with only 1 line of code by using brackets after const, we can assign a variable name to each index in the array.
The position of the variable name matches the value of the index in the array.
Now what if you assign more variable names than the index in the array? It will just assign them to undefined.
You can also omit a variable by just leaving the index empty.
In some cases, you might just want to name a couple of variables and store all others in their separate array. That can be achieved by putting three dots (...) in front of the variable name.
The three dots(...) is called a spread operator and it will store all the other elements in an array. Another use case of the spread operator can be that you can combine 2 arrays.
You can also set a default value, in case the value in the array is undefined. But note that, you can't override the default values from hobby.
This will only work if the value of the variable is undefined or left empty. If a value already exists there, then it will print the same value and not the default one.
Array destructuring also allows you to swap 2 variables without the need for an intermediate variable.
You would rarely use this but is good to know.
Object Destructuring
Destructuring also works with objects, notice how we are duplicating the object's property name as a variable with a dot notation. By putting curly braces after const we can mimic what we did with arrays, but in objects. Now note that it works based on the key and not the position, unlike array destructuring. So you have to provide the same key name as the variable name, but there are ways you can use an alias.
You can also set a default value, in case the value in the object is undefined. You can also use a different name(alias) than what is provided on the object itself. You can do that by adding a colon(:) after the property name
Along with renaming, you can also use a colon(:) to access nested properties.
Here you are just setting a variable from an object within an object.
You can also use the spread operator(...) like we did in array destructuring.
You can also combine 2 objects as we did with arrays
Now what will happen here is that, the person3 will create a copy of person1 and person2 combined but it will override all the values of person1 and apply the values of person2. So what will happen is, something like this
You see it overrides the age entity from 18 to 20.
You can also use object destructuring in functions as well, so instead of doing something like this
You can just destructure the object in the function something like this
This userInfo will take the object as an argument and then destructure it and use only the fields that are required.
Now imagine you want to destructure an object, but you don't know the property name until runtime. You can use computed properties in destructuring. By wrapping a property name in brackets, it can take a variable as its value instead of a static name or you can also say that it is computed at runtime. Then you can provide a static name to it, so you can use it in your code and it will be computed at runtime.
