Adding Gotchas of JavaScript into your Vocabulary

Prince Garg
Apr 22 · 5 min read

If you have some experience with javascript, you probably faced some situations where you wrote some logic, it is straight and simple but somehow it’s not working as it possibly would have worked according to you.

Today, I would like to discuss such situations where I faced such issues and knock them down by looking at the details.

So, Let’s Get Started…

1. Passing Objects

I personally follow a rule- We only save the reference to an object in a variable. Yes, we don’t save any object inside a variable ( declared or parameterized ). What I meant by reference here is- when we call the variable, it will point to the original object to perform the operation. And when we try to pass the object to another variable or to another function( as a parameter ), we are actually passing a reference to the original object. And this can lead to mutation.

Example- declaring a variable-

And, variable as a parameter-

Mutation can lead to disasters. So, avoiding these situations is a good idea. When you want to pass an object from one variable to another variable or to a function, use Object.assign({}, obj). It will help you avoiding mutation and you never have to worry about unexpected modifications to the object.

Consider the modified examples-

Declared variable-

And, variable as a parameter-

But What if we get the object from .find() or array[index] ?

Assume we have an array of objects and we want to save one of its object inside a variable. We can use .find() or array[index] directly to get the object and store it inside a variable. But guess what, it’s again the reference to the object that will be stored in that variable. And if you modify anything with that variable which contains the object, it will mutate the original object. Again, use Object.assign() and just get rid of unexpected mutation.

2. Using Logical Operators

Ok I know you will shout at me and say, how the hell in the world of javascript logical operators can give you a hard time?

Consider,

Here some interesting thing is happening. I need your attention here, in javascript “&&” operator returns last value (“somevalue2”) if all values are truthy otherwise false. And “||” operator returns first truthy value (true). On the other hand, “||” operator will return the last falsy value if no value is true.

Falsy values are numeric zero(0), NaN, false, undefined and empty string(“”). Truthy values are all the values that are not falsy.

Thus, checkString will not contain a boolean value, instead, it contains a truthy value(“somevalue2”) in the checkString variable. And for checkBoolean? Yep, you guessed it, it will have value “true”. Why? Because the rule of “||” operator applies here. So when we check for their equality with “===” operator we are checking a string(“somevalue2”) and a boolean (true). They are not of the same type and value we got an “OOPS!” here.

To get expected result( i.e. “Yeyee…” ), we can use Boolean( <expression> ). It converts truthy value to Boolean true and falsy value to Boolean false. Or we can also use not( ! ) operator twice to get a boolean value. I prefer using Boolean() function, it makes our code more readable.

Consider,

3. “==” vs “===” operators

“===” uses strict equality comparison algorithm. In simple words, no coercion is allowed. It only returns true if values & types are equal and false otherwise. On the other hand, “==” is a special operator but it can also create problems if not understood properly. It uses coercion while converting values if types are not the same and compare values. Coercion is a vast topic, so we will only keep our focus on coercion related to “==” operator.

We only need to understand some rules to take advantage of the coercive nature of “==” and here is a great article to understand it.

P.S. thanks Alexey.

Above the table is simple, When comparing same types then the same algorithm that is used for “===” is used. When comparing numbers to a string, the string will be converted to the number and then compared.

When we compare the string to an object, something special happens. Each object( array, function, object ) have its own ToPrimitive() function. ToPrimitive() converts object to a primitive value( string, boolean, number ). It provides a simple value, after converting a complex data structure for comparison purpose. When we compare an object to any primitive value, the object will call its ToPrimitive() and then the comparison is performed.

If you ask me when to use “===” and “==”. My answer will be-

  1. Ask yourself first, if you are pretty sure that types of comparing values would be same then always use “===” otherwise you can use “==”.
  2. When comparing Object to Object, first convert them to string either by using JSON.stringify() or concatenating with an empty string(“”) will work just fine then compare. Below is the reason behind it-

Primitives like strings, booleans and numbers are compared by their value, while objects like arrays, dates, and plain objects are compared by their reference. That comparison by reference basically checks to see if the objects given refer to the same location in memory.

Conclusion:

Just remember a few things while working with Javascript, if you want to avoid mutation use Object.assign(). Use Boolean() to get result of && and || in the boolean true or false. Understand coercion when using “==” or you will always be great with “===”.

Always remember,
You are awesome

Prince Garg

Written by

Blockchain, node js, MongoDB, MySQL, Elasticsearch, express js, sails js, socket.io, Javascript

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade