Effective Destructuring or The Patterns of … in Javascript
It is kind of funny that for a CTO and machine learning expert I write to many articles about Javascript. But here it goes. A while ago during a project I has to be able to add dynamically generated keys to an object. I was using destructing pattern for shallow copies and object modifications and to keep my code uniform I preferred to stay with this. To my surprise non of the Javascript programmers new how to do this and it was even hard to find it with a search on the internet. So I decided to write this.
Destructing is a new pattern in ES6 that facilitate creating shallow copies of an object while you modify the new copy at the same time. For example let’s consider this:
This is used for immutability, which is needed in many Javascript frameworks such as React and Redux or generally if you are adopting a strict functional programming paradigm. Now let’s take a look at different ways destructuring can be used to keep your code clean and to effectively manipulate your data while keeping it immutable.
- Clean Read Access:
In small cohesive functions it is a pain to keep referencing input object name when working with its attribute. You can use destructing to extract the required attributes at time of input and use it in the body of your function like this:
Note that …rest must appear at the end of your destructing. While you might mostly see this patterns used like this there is nothing special about the word rest and you can use any other name as you wish.
2. Updating Attributes
You can use destructuring to modify attributes in immutable way. This means creating a shallow copy and modifying some of the properties or optionally adding new attributes.
In the first example (capitalizeName), unlike the input where …rest must appear in the end, in the return statement it is allowed to put …rest either in the beginning or in the end, however if …rest comes at the end and it already contains the key that you are modifying it will overwrite your modification. Note that in this example this won’t happen anyway because due to destructuring in the input …rest will not contain firstName and lastName. Yet to avoid inadvertent bugs it is good practice to keep the …rest in the beginning.
3. Dynamic Key Generation
When using destructuring you can use variable name is the key because the variable name itself becomes they key neither can you use back ticks to generate dynamic strings. Here is the correct way to generate dynamic keys using []:
I hope you are familiar with .reduce(), if not definitely look into or ask me to write about it. It is a life saver. Please note that this is just an example and for other technical reasons it is not good to use destructing to iteratively copying arrays and objects due to big performance hits described here.
4. It Works for Array Operations Too
The same way you modify objects you could use destructuring to extract values from an array or construct new arrays.
Use it well and let me know if you need help :-)!
