đȘ 5 JavaScript Tricks So Tricky, Youâll Think Theyâre Magic! â Episode I
Today is the start of a series of articles about tricky things in Javascript that no matter how senior you are, you will be like: âWTF JS, are you ok?â.
The daily article, here we go! Today is the start of a series of articles about tricky things in Javascript that no matter how senior you are, you will be like: âWTF JS, are you ok?â.
I hope you find this series entertaining and maybe even funny. If you do, follow up since I will keep posting the next chapters in the following days!
1ïžâŁ [] is equal ![]
Yeah, that is the first one. Does it make any sense? Well, we will see:
[] == ![] -> true
So letâs explain it. The abstract equality operator (==) converts both sides to numbers to compare them, and the âmagicâ here is both sides will become the number 0 for different reasons.
On the right side, since arrays are truthy, the opposite (due to !) is false.
And what about the left side? Well, an empty array is coerced to a number without becoming a boolean first, and⊠empty arrays are coerced to 0, despite being truthy.
2ïžâŁ true is false
This sounds⊠impossible, isnât it? Letâs go step by step:
!!"false" == !!"true"; // -> true
!!"false" === !!"true"; // -> true
So the explanation is the boolean true is âtruthyâ and represented by value 1 (a number). âtrueâ (the string) in string form is NaN (NotANumber), so:
true == "true"; // -> false
false == "false"; // -> false
Since âfalseâ is a non-empty string, it is a truthy value:
!!"false"; // -> true
!!"true"; // -> true
Now we know that both sides are true, so if we compare them (with == or ===), we will get they are equal!
3ïžâŁ fooNaN
Letâs go with an old Javascript joke. The proposition is the following:
"foo" + +"bar"; // -> 'fooNaN'
Donât worry; this one is easy to explain (and yes, the example code is not wrong, part of the magic is the double +).
The previous expression is evaluated as âfooâ + (+âbarâ). That will convert âbarâ to a NaN (Not a Number) and then will join both strings creating the fooNaN string.
You can read about the + unary operator here, if you are curious!
4ïžâŁNaN is not a NaN
Talking about NaNs, now we have another mindblowing one:
NaN === NaN; // -> false
How. Is. That. Even. Possible?
Well, time to make the implementation guilty.
The specification strictly defines the logic behind this behavior:
If Type(x) is different from Type(y), return false
If Type(x) is Number, then:
i. If x is NaN, return false
ii. If y is NaN, return false
âŠ.
You can read it fully here: Equality Comparison
So, since NaN acts as a number here, we will see that the comparison will be false by following the definition!
5ïžâŁ Adding Arrays
You know that you can join two (or more) strings by doing this:
const strA = "test";
const strB = "test2";
const newString = strA + strB; // -> "testtest2"
(Although it is better to use template literals, for this example, I prefer to use this)
Can you do the same with two arrays? Something like:
const arrA = [1, 2, 3];
const arrB = [4, 5, 6];
const newArr = arrA + arrB; // [1, 2, 3, 4, 5, 6] ?
No! You will get this!
const newArr = arrA + arrB; // "1, 2, 34, 5, 6"
So, why? Why does it behave like that?
Well, letâs see it step by step:
[1, 2, 3] +
[4, 5, 6][
// call toString()
(1, 2, 3)
].toString() +
[4, 5, 6].toString();
// concatenation
"1,2,3" + "4,5,6";
// ->
("1,2,34,5,6");
Basically, the + operator converts them to strings and concatenates them; that is why we get that weird result!
That is it! I would love to keep writing more and more, but I donât want to bore you that quickly! If you liked this, make sure to follow because, in the following days, you will have the next âepisodeâ of this series, with even crazier Javascript things (we have to level up!).
With that being saidâŠ