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.
I learned this hard way. We have to always do a
null check before accessing a
key in object. Sometimes we thought that this will never be
null why should I bother to add an extra
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:
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
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.
defaultvalues 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
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
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
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.
4. Taking care of non-primitive data types in JS
I’ve seen code of many applications where people are directly passing
arrays in a function, applying transformation and returning the transformed
The problem with
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:
Now, we may think that
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
Here I am showing using spread operator:
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
In the above code, there is no way to know what the heck is
true without seeing the implementation of
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:
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.
I hope these tips will help in you in writing good and error free JS Code.