Do you know Javascript? The language we all love has some weird and sometimes unexpected behaviors.
It is a good idea to know them, mostly to avoid unexpected bugs and unpleasant surprises.
Do you want an example?
const a = 0.1;
const b = 0.2;
const c = 0.3;
console.log(a + b === c); // false
The output here is false. The sum 0.1 + 0.2 is not equal to 0.3.
Why does this happen? It's because of how floating point numbers are represented in JavaScript.
One more cool example:
"2" + "3" === "23"; // true
This was expected, right? We're concatenating two strings. But what if we replace + with *?
"2" * "3" === 6; // true
In this case, the * operator tried to convert the two strings in numbers, that's why we got 6.
The minigames
I've collected 12 situations like these and I will walk you through them in this video. I will also use the node REPL to further expand on some of them when the output is particularly weird.
https://youtu.be/8gGuu9c9miY?embedable=true
Not a video guy? Here are all 12 minigames:
1. "B" + "a" + +"🟡" + "a"
2. 0.1 + 0.2 === 0.3
3. "2" + "3"
4. "2" * "3"
5. NaN === NaN
6. Array(3).join("Subscribe")
7. "hello".split("").reverse().join("")
8. "hello".split().reverse().join("")
9. [1, 2, 3, 4].length
10. [ , , , ].length
11. typeof 42
12. typeof typeof 42
Wait.
Think about those challenges and try to guess the answers.
Write them down.
Ok, now you can keep scrolling and see the solutions!
"B" + "a" + +"🟡" + "a" => BaNaNa
In this expression, +"🟡" is a unary plus operator followed by the string "a". The + operator tries to convert the string to a number. Since "a" cannot be converted to a number, it returns NaN. When you concatenate "B", "a", NaN, and "a", it results in "BaNaNa".
2.
0.1 + 0.2 === 0.3 => false
As explained above, due to floating-point rounding errors, 0.1 + 0.2 does not equal 0.3. Therefore, 0.1 + 0.2 === 0.3 returns false.
3.
"2" + "3" => 23
When you use the + operator on two strings, it concatenates them together, resulting in "23".
4.
"2" * "3" => 6
When the * operator is used with two strings, JavaScript will try to convert them to numbers first. Since both "2" and "3" can be converted to numbers, JavaScript will convert them and perform the multiplication, resulting in an output of 6.
5.
NaN === NaN => false
NaN is a special value in JavaScript that represents "Not a Number". NaN is not equal to any value, including itself. Therefore, NaN === NaN returns false.
6.
Array(3).join("Subscribe") => "SubscribeSubscribe"
The string “Subscribe” is added in between the elements, which are empty. Hence, between 3 elements there are two slots.
7.
"hello".split("").reverse().join("") => "olleh"
This expression splits the string "hello" into an array of characters using the split method. Then, it reverses the order of the array using the reverse method. Finally, it joins the reversed array back into a string using the join method, resulting in "olleh".
8.
"hello".split().reverse().join("") => "hello"
The split method expects a separator as an argument. When no separator is provided, it defaults to undefined, and the string is not split into an array. Therefore, the reverse and join methods cannot be applied to the string.
9.
[1, 2, 3, 4].length => 4
This function creates an array with four elements ([1, 2, 3, 4]) and returns its length, which is 4.
10.
[ , , , ].length => 3
This time we create an array with three empty items ([, , ,]). When an array is created with empty items like this, JavaScript sets the length of the array to the number of items specified. In this case, the array has a length of 3.
11.
typeof 42 => 'number'
The typeof operator returns the type of the operand. Since 42 is a number, it returns "number".
12.
typeof typeof 42
typeof 42 returns the string "number" as seen in the previous game. Therefore, typeof applied to the string "number" returns… the string "string"!
And this was the last one! I hope you enjoyed it and maybe even learned something new :D
Feel free to write a comment with how many you got right and what you didn’t guess correct.
See you soon!
Also Published Here