Think You Know JavaScript? These 15 Quirks Will Change Your Mind! 💥

JavaScript is a flexible, quirky language that can sometimes leave you scratching your head. If you've spent any amount of time working with JS, you've probably encountered a few unexpected behaviors, like 0 == "0", or wondered why 0.1 + 0.2 !== 0.3.

In this blog, we'll dive into some of JavaScript's most puzzling features, helping you understand how the language works under the hood and avoid potential pitfalls in your code. Ready? Let’s get started! 🚀

1. "False" == 0 but Not "False" == "0" 🤯

You might expect "False" to be equal to "0", but here's the catch: "False" == 0 is true, but "False" == "0" is false.

This happens because JavaScript’s equality operator (==) triggers type coercion. When you compare a string to a number, JS tries to convert the string to a number first. And since "False" doesn't really have a numeric value, it becomes NaN. But "0" becomes the number 0, so when we compare 0 == 0, it’s true!

Example:

console.log("False" == 0);   // true (coerces "False" to NaN, NaN == 0 is false but coerces NaN to 0)
console.log("False" == "0"); // false

2. 0.1 + 0.2 Isn't Exactly Equal to 0.3 😲

This one is a classic!

console.log(0.1 + 0.2 === 0.3); // false

Why? JavaScript uses IEEE-754 for floating-point arithmetic, which can cause precision issues. So, 0.1 + 0.2 doesn’t exactly add up to 0.3. It’s a common pitfall in financial apps, for example.

Solution:

For comparisons like this, use a small tolerance:

const isEqual = Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON;
console.log(isEqual); // true

3. typeof null Returns "Object" 🧐

This one’s a head-scratcher. When you check the type of null, it gives you "object".

console.log(typeof null); // object

Why? Well, it's a historical mistake in JavaScript's early days. The type of null should have been "null", but due to a bug, it ended up being "object". But now, it’s too late to change it without breaking old code.

4. [1,2,3] + [4,5,6] = "1,2,34,5,6" 😅

Here's another weird one! When you add two arrays together, JavaScript converts them to strings before adding them. The result? A strange concatenation!

console.log([1, 2, 3] + [4, 5, 6]); // "1,2,34,5,6"

This happens because arrays get converted to strings, resulting in "1,2,3" and "4,5,6", and when those are added together, it becomes "1,2,34,5,6".

5. NaN === NaN is False 🔄

Yes, NaN (Not-a-Number) is a special value in JavaScript, and it’s never equal to itself.

console.log(NaN === NaN); // false

Why? The logic behind this is that NaN is not a real number, and thus it cannot be equal to anything, even itself.

Tip:

To check for NaN, use Number.isNaN():

console.log(Number.isNaN(NaN)); // true

6. Why [] == ![] is True But [] == [] is False 😱

In JavaScript, [] == ![] is true, but [] == [] is false. How?

• [] == [] is false because two different empty arrays are not the same object reference.
• [] == ![] works because ![] coerces to false, and an empty array is a truthy value. Thus, [] == false becomes true after coercion.

7. Math.max() Returns -Infinity 🤔

When you call Math.max() without any arguments, it returns -Infinity.

console.log(Math.max()); // -Infinity

This happens because JavaScript considers the absence of arguments as a comparison with negative infinity. If you need a fallback value, use:

const max = Math.max(...numbers) || 0;

8. 0 == "0" and 0 == [] but "0" != [] 🔀

JavaScript's == operator does some bizarre things with type coercion. For example, 0 == [] is true, but "0" == [] is false.

console.log(0 == "0"); // true
console.log(0 == []);  // true
console.log("0" == []); // false

This happens because [] is first coerced to an empty string when compared with "0", making the second comparison false.

9. undefined + 1 Returns NaN, but null + 1 Returns 1 🤷

Here’s a peculiar one. When you add undefined to a number, you get NaN. But adding null to a number results in 1.

console.log(undefined + 1); // NaN
console.log(null + 1);      // 1

Why? undefined is not a number, so it gives you NaN, while null is treated as 0 in arithmetic operations.

10. New Array(3) vs [,,] 😳

What’s the difference between new Array(3) and [,,]?

• new Array(3) creates an empty array with 3 slots (no values), whereas [,,] creates an array with 2 undefined values.

console.log(new Array(3)); // [ <3 empty items> ]
console.log([,,]);          // [undefined, undefined]

11. parseFloat("3.14abc") Works, But parseInt("3.14abc") Doesn’t 😅

When parsing strings with numbers and text, parseFloat will try to read the number up to the first non-numeric character. parseInt, on the other hand, stops at the first non-numeric character and doesn’t work for decimal numbers.

console.log(parseFloat("3.14abc"));  // 3.14
console.log(parseInt("3.14abc"));    // 3

12. [] + {} vs {} + [] 🔄

Did you know the order of operations matters in JavaScript? [] + {} results in a string, but {} + [] does nothing.

console.log([] + {});   // "[object Object]"
console.log({} + []);   // "[object Object]"

13. 0.1 * 0.1 Prints “0.010000000000000002” 📐

JavaScript’s floating-point arithmetic can sometimes give unexpected results, like in the case of 0.1 * 0.1:

console.log(0.1 * 0.1); // 0.010000000000000002

This occurs due to binary floating-point precision errors.

14. Truthy and Falsy Values 🚦

In JavaScript, certain values are treated as falsy: "", 0, null, undefined, NaN, and false. Anything else is truthy.

console.log(!!"");      // false
console.log(!!0);       // false
console.log(!!null);    // false
console.log(!!1);       // true

Conclusion: JavaScript is full of surprises! 🎉

Now that we've covered some of JavaScript's most curious quirks, it's time for you to test your understanding. Ready for some tricky questions? 🤔

1. Why does typeof NaN return "number" when NaN is not a number?
2. What do you get when you subtract Infinity - Infinity in JavaScript?

Drop your answers below! Let’s see how many of you get them right! 😎