JavaScript is an Odd Language...

JavaScript is a fantastic language, but some of its quirks can drive developers crazy. Let’s take a look at some of the most interesting and confusing aspects of JavaScript.

1. Why is `typeof null` “object”?

js
console.log(typeof null); // "object"

This is a legacy bug in JavaScript. null is not actually an object, but since early versions of JavaScript categorized it this way, it was never corrected. I was shocked when I first read this in You Don’t Know JS. You know we should “not break the web”, but we should also “not break the language”. 🤦🏻

2. `NaN !== NaN`

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

Normally, comparing a value to itself should return true, but NaN breaks this rule. This happens because NaN represents an undefined mathematical value. You can check for NaN using isNaN(NaN).

3. `isNaN` vs `Number.isNaN`

js
console.log(isNaN("hello")); // true
console.log(Number.isNaN("hello")); // false

The global isNaN function attempts to convert values to numbers before checking if they are NaN. This means non-numeric values can sometimes return true. In contrast, Number.isNaN only returns true if the value is explicitly NaN, making it a safer choice.

4. `0.1 + 0.2 !== 0.3`

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

This occurs due to floating-point arithmetic. JavaScript uses double-precision floating-point numbers, which can cause precision errors. To fix this, you can use toFixed() or Math.round(). But this is not a bug specific to JavaScript. This is a standard problem of floating-point arithmetic in nearly all programming languages and the reason lies in IEEE 754 standard.

5. Why does `[] + []` return `""`?

js
console.log([] + []); // ""

Empty arrays convert to strings when added together because JavaScript treats the + operator as a string concatenation operator in this case.

6. `true + true === 2`

js
console.log(true + true); // 2

This happens because true is evaluated as 1 and false as 0. Therefore, true + true = 1 + 1 = 2.

7. `[] == ![]`

js
console.log([] == ![]); // true

This is due to JavaScript’s type coercion. ![] evaluates to false, and [] == false is coerced to true.

8. Why is `"5" - 3 === 2` but `"5" + 3 === "53"`?

js
console.log("5" - 3); // 2
console.log("5" + 3); // "53"

The + operator triggers string concatenation, whereas -, *, and / convert strings to numbers before performing the operation.

9. `!!"false" === true`

js
console.log(!!"false"); // true

Since "false" is a non-empty string, it is considered true in a boolean context.

An empty object {} is interpreted as a block, causing this strange behavior. You can wrap it in parentheses to change how JavaScript evaluates it.

10. What does `new Array(3).toString()` return?

js
console.log(new Array(3).toString()); // ",,"

new Array(3) creates an array with three empty slots, which are treated as undefined. When converted to a string, it results in ",,".

JavaScript has many more quirks like these. Understanding them helps you grasp the inner workings of the language. Have you encountered any weird JavaScript behaviors?

Album of the day: