Funny JavaScript, It'll make you Laugh and Cry

grover_sumrit

Sumrit Grover

Posted on June 9, 2024

Funny JavaScript, It'll make you Laugh and Cry

Even though Javascript is the most sought after language for developers all around the world, it is a funny language, with nuances that can turn our everyday jobs hell. Some of the nuances will even have you laughing out loud.

1. JavaScript will have you go BaNaNa

Lets start with something that most of you would mostly know, the infamous joke in JS.

'"B" + "a" + +"a" + "a"; // -> BaNaNa
Enter fullscreen mode Exit fullscreen mode

Explanation

The first part "B"+"a" will be a string concatenation. the magically part would be + + 'a', here first JS will try and type cast + 'a' to a string, will would result in NaN getting concatenated to the string. The remaining would also be a simple concatenation, + 'a'.

This would make the result go BaNaNa

2. Two [] are not equal

Array is not equal to an array 🤯

[] == ![]; //-> true
Enter fullscreen mode Exit fullscreen mode

Explanation

The abstract equality operator will convert both sides to zero but for different reasons. Arrays are always truthy, the opposite of that would be false, which would then be coerced to a 0. On the left it would be coerced to a 0, because empty array is coerced to a number without becoming a boolean first, and empty arrays are coerced to 0, despite being truthy.

3. true is not equal to [] but also not to ![]

true == []; // -> false
true == ![]; // -> false
Enter fullscreen mode Exit fullscreen mode

Explanation

For the first statement, because we are using abstract equalities, the [] would be coerced to 0 and true will be coerced to 1. Hence 1 != 0!

While in the second statement, ![] would change to false, because [] is a truthy value.

4. Object.is() and === don't work respond the same

Object.is() determines if two values have the same value or not. It works similar(not the same) to the === operator.

Object.is(-0, 0); // -> false
-0 === 0; // -> true
Enter fullscreen mode Exit fullscreen mode

Explanation

In JS, -0 and 0 are strict equals but they are not the same value.

5. Minimal value is greater than zero

Number.MIN_VALUE is the smallest number, which is greater than zero:

Number.MIN_VALUE > 0; // -> true
Enter fullscreen mode Exit fullscreen mode

Explanation

Number.MIN_VALUE is 5e-324, the smallest positive number that can be represented with floating point precision(closest you can get to zero).

6. Precision of 0.1 + 0.2

This will tickle your funny bone, the addition of 0.1 and 0.2 with accuracy you couldn't imagine.

0.1 + 0.2; // -> 0.30000000000000004
0.1 + 0.2 === 0.3; // -> false
Enter fullscreen mode Exit fullscreen mode

Explanation

The response is not a bug but the indented behaviour, because our systems are 2 based systems, you can clearly express fractions whose denominator only has a prime factor of 2. In binary, 1/2, 1/4, 1/8 would all be expressed cleanly as decimals, while 1/5 or 1/10 would be repeating decimals.

7. Comparing 3 numbers

1 < 2 < 3; // -> true
3 > 2 > 1; // -> false
Enter fullscreen mode Exit fullscreen mode

Explanation

This all happens because of type conversions, lets try and understand what is happening with code itself

1 < 2 < 3; // 1 < 2 -> true
true < 3; // true -> 1
1 < 3; // -> true

3 > 2 > 1; // 3 > 2 -> true
true > 1; // true -> 1
1 > 1; // -> false
Enter fullscreen mode Exit fullscreen mode

TL;DR

JavaScript is a very funny language, and understanding it can be a pain, share this with your friends to give them a headache as well

💖 💪 🙅 🚩
grover_sumrit
Sumrit Grover

Posted on June 9, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related