Writing JavaScript like a PRO !!!

Hello World !!! 🌏
In following article I’ve talked about few things that may seems small at one glance but they will impact on your code at broad scale.

Here are the few tips by which we can ensure, that we are writing clean and error free code.

1. null check 💁🏻‍♂️

I learned this hard way. We have to always do a null check before accessing a variable or key in object. Sometimes we thought that this will never be null why should I bother to add an extra if of try block. But trust me web is full of randomness. There may be n number of cases when we can receive unpredictable data. Consider following code:

Function without null check

At first glance this might look ok.
But if we pass nothing to this function then we will get

`TypeError: Cannot read property ‘toUpperCase’ of undefined`.

For such scenarios we can leverage the OR || operator.

We can also go ahead with if else block or we can use ternary operator. But I feel these ways are little bit old fashioned. || will make our code cleaner and good to eye.

Here I am giving all ways by which we can handle such scenarios.

Function with Proper Null check

2. default values in function arguments

Generally we tend to just pass data in functions and start using it without giving a second of thought what if we receive null or unwanted data in function arguments. Lets consider above code

Function without default value

Here I’ve to check existence of name before using it. Right now this function is small and we are easily able to see what is coming and what we can do.

But with time when our code grows there will always be chances when we miss to do a null check.

We can add one additional layer of check to guarantee that our code never throw’s exception.

For this we can use default value to function arguments: Like

Function with default value

3. Using inbuilt function on appropriate datatype

In my above example, seems like we have handled all cases. But what if you get numeric value in name field.

In that case you will be getting

`TypeError: name.toUpperCase is not a function`.

To avoid such cases, first convert the received data in appropriate format and the call function on it.

converting datatype before calling functions

4. Taking care of non-primitive data types in JS

This is the most important part of JavaScript coding.
I’ve seen code of many applications where people are directly passing objects and arrays in a function, applying transformation and returning the transformed objects.

The problem with arrays and objects is that they are are reference type. When we pass them to a function, we are passing their reference. And if we change our object inside it, our original object gets changed. Consider Following example:

Not caring about references

Now, we may think that noddy and oldNoddy will be different. But wait, try this out. Write this code and check by yourself. You’ll get both noddy of same age.

Now to fix this issue we have several ways. We can use them as per our requirement.

1. Spread Operator
2. Object.assign() // Only do the shallow cloning i.e. If your objects are nested, then only first level of object will have new references, nested one will be the same.
3. Third Party Libs to Clone- https://www.npmjs.com/package/lodash
4. Immutable.JS

Here I am showing using spread operator:

Caring about references

5. Descriptive name for user defined values

You may find this in your code base or have seen in others code that people are using hard coded values thought out there code.
Generally we use hard values in two ways:
1. String constants — We should avoid using this.
2. In Function parameters
In this article I want to talk about the second way. Lets consider below code

Using hard coded data

In the above code, there is no way to know what the heck is true without seeing the implementation of transformData .
In case you are library function you may get to know it, by going to documentation.
But what if the code is written by your colleague or you’r fixing a production issue and running out of time. In such cases such code increases the frustration level.
To make this clear so that true speaks its function loud we should create a const with descriptive name like:

Using descriptive names

There is no functional or performance improvement by above code. But it will help us/others to know more about our code in less time.

6. Logging multiple objects

In many cases we have to console.log multiple objects. generally we write the console statements one after another , the problem with this approach is that we won’t be getting the name of the objects.

We can leverage the concept of computed properties and can have name of the objects when we log them.

7. De-structure objects
We often iterate over array of objects to get either a custom UI or custom set of data. Generally we refer to the data by object.key notation. But if we have to use large number of keys from a single object then our code becomes very lengthy and difficult to manage.

We can use the de structuring to solve this problem.

.

.
8. If and function execution in one line

.

,

9. using !! to get boolean result

CHEERS !!!
I hope these tips will help in you in writing good and error free JS Code.