June 02, 2018
Now let’s see some fun facts - but very important to remember, to avoid coding mistakes.
The implicit type conversion for Arithmetic operators
The obvious way to multiply 2 by 2
2 * 2 = 4
"5" * 2 = 10
"3" * "3" = 9 "JS" * 6 = NaN //"JS" cannot be converted to a number "Two" * 3 = NaN //"Two" cannot be converted to a number as well
The obvious way to divide 10 by 2
10 / 2 = 5
By now, you might be familiar.
"30" / 2 = 15
"100" / "4" = 25
Let’s get this done with the last operator.
Well, this needs no explanation.
5 + 5 = 10
"10" + 10 = 1010
WTF? 1010? No implicit type conversion?
Yes, things work quite differently for ”+” operator, so whenever one of the operands is of type string, the other operand gets converted to the string type too.
For addition to work, both the operands should be of numeric types.
10 + 10 = 20
30 + Number("20") = 50
20 + +"20" = 40
What? - Wait, I am not drunk. That is an amazing thing about using ”+” as a unary operator. Prepend it to any string representing a number, and it converts the string into its equivalent numeric value.
20 + (+"20") = 40
Hold on, let me show you some more interesting things about using ”+” as a unary operator. Caution: Do not go crazy.
25 + +null = 25
50 + +"" = 50
In JS, the equivalent numeric value for the null and empty string is 0.
Point to note: If you prepend it to any string containing alphabetic keywords like “Hulk” or “Tron”, it would result into NaN (Not a Number) and any operation with NaN, results as NaN.
The comparison and equality operators
Usually comparison and equality operators like >, >=, <, <=, and == are used with numbers.
For example, let’s say we want to check if 2 is greater than 1.
2 > 1
This will return a boolean value, either true or false, depending on the comparison. In above example, it will return true.
Let’s provide a string representing a numeric value.
"10" == 100
"100" > "10"
Let’s try out something cooler.
true > 0
Returns true, since true is represented as 1 in its numeric form, 1 > 0 is always true.
false <= 0
Returns true, since false is represented as 0 in its numeric form, 0 <= 0 is always true.
Also, for empty strings,
"" > -1
Returns true, since ”” (empty string) is represented as 0 in it’s numeric form, 0 > -1 is always true.
Same applies to null,
null > 0
Returns false, because null is represented as 0, and 0 > 0 is always false.
null >= 0
Returns true, as null is not greater than 0, from this we can confirm that null is equal to 0.
null == 0
null == undefined
WHAT THE F*CK IS GOING ON HERE!
Although it is a part of design spec, I googled why null == undefined returns true, it’s because (take this with a pinch of salt) both null and undefined technically represents nothing (and are also falsy in nature), hence they are shown to be equal when we use the equality operator. Of course, if we use strict equality (===), we get false because both belong to types of their own. Therefore, a point to remember is that the null represents itself to be 0 when used with comparison operators like >= or <= or < or >, but that does not apply when we use the equality operator.
Hi, I am yet another Software Engineer and my interests revolve around UI, UX, and Product. I write about random stuff, I explore life and sometimes I look for stars in the skies.