3 small tips to become Master Yoda of modern JavaScript
During code review, the reviewer will classify the developer as a beginner as soon as he sees some old-school JavaScript code in an Angular or React project. But if you know the following 3 tips, you will be considered as Master Yoda of modern JavaScript. So, let’s begin our journey!
The magic spread operator
The spread operator … is my favorite operator in JavaScript. I mainly use it in the following 3 cases:
• Making a copy of an array
• Expanding an array
• Expanding an object
The best way to do the null check
Do you still remember your first null check code?
I can’t forget my old code in JEE project when JavaScript is not yet so developed:
And now, my life is saved by the simple if:
The condition of if above will evaluate to true if foo is not:
null, undefined, NaN, empty string, 0 or false.
Besides the simple if, the use of optional chaining and nullish coalescing can make our code cleaner.
The optional chaining ?. is a safe way to access nested object properties. Meaning that we don’t have to do multiple null checks when accessing a long chain of object properties.
The following example allows to check if the zip code of the client’s address is null :
The nullish coalescing ?? is not really brand new, it is just a simpler syntax. It returns the first argument if it’s not null/undefined. Otherwise, the second one.
The code below will show the message if it is not null/undefined. Otherwise the world “welcome”.
It becomes powerful when we use it in a sequence:
In this example, it will show the firstName if it’s not null/undefined, otherwise, it will show the lastName if the lastName is not null/undefined. And finally, it will show ‘anonymous’ if both of them are null/undefined.
Using .map(), .reduce(), and .filter()
Yes, we are talking about the powerful techniques of functional and reactive programming! It really opened a new door for me when I first used it years ago. Now every time I look at those simple instructions, I am still shocked by its beauty.
One of the fundamentals of functional programming is the use of lists and operations, today I will give an example of refactoring with the three most famous operations: map, reduce and filter.
Before Covid-19, a Japanese family came to Paris for their vacation. So they did some shopping in a supermarket. They bought food and daily necessities. But all the items are in euros, they wanted to know the price of each item as well as the total cost of their food in Japanese yen.
Given that 1 euro equals 126 yen.
So, in the traditional way, we will do it with a classical loop like:
Without explanation, it is not so declarative. But with our magic functional operations, the code is now telling us a story!
The map transforms all the price from euro to yen, the filter removes nonfood items and the reduce adds the price of each food item to the total sum!
Follow up: several active readers noticed that in the yen conversion case, the use of map, filter, and reduce will iterate the array 3 times. But as the time complexity of the algorithm remains O(N), it won’t impact the performance of an ordinary application. I have done such refactoring for an application of considerable data volume, there was no performance problem. But I totally agree that we should be very careful with extremely large data.
Another excellent feedback is for the spread operator. If we do a lot of data processing to build large arrays, for example, it’s better to avoid using the spread operator and stick with modifying in place.
Thanks for reading, see you next time!
