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!

Image for post
Image for post
Photo by Thomas Evans on Unsplash

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

Image for post
Image for post

• Expanding an array

Image for post
Image for post

• Expanding an object

Image for post
Image for post

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:

Image for post
Image for post

And now, my life is saved by the simple if:

Image for post
Image for post

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 :

Image for post
Image for post

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”.

Image for post
Image for post

It becomes powerful when we use it in a sequence:

Image for post
Image for post

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:

Image for post
Image for post

Without explanation, it is not so declarative. But with our magic functional operations, the code is now telling us a story!

Image for post
Image for post

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!

A self-motivated and open-minded senior full-stack software engineer worked for SAP, Orange, and Societe Generale CIB.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store