7 JavaScript Type Coercion Pitfalls You Must Avoid

Type conversion is one of the most error‑prone features in JavaScript, especially the implicit conversion performed by the double‑equals (==) operator. This article examines common pitfalls and shows how to avoid them in real code.

Pitfall 1: Comparing Numbers and Strings

When a number is compared with a string, JavaScript tries to convert the string to a number. If the string is not a valid numeric representation, the result can be surprising.

console.log(1 == '1')      // true
console.log(1 == '1.0')    // true
console.log(1 == '01')     // true
console.log(0 == '')       // true

// more extreme examples
console.log(999 == '999fitness') // false
console.log(0 == '0.0000')        // true

Pitfall 2: Boolean Conversion

Booleans are converted to numbers before comparison (true → 1, false → 0).

console.log(true == 1)      // true
console.log(false == 0)     // true
console.log(true == '1')    // true
console.log(false == '')    // true

// confusing cases
console.log(false == '0')    // true
console.log(true == '2')     // false
console.log(true == ['1'])   // true  🤯

Pitfall 3: null and undefined

The comparison null == undefined is a special rule; when used in relational comparisons, null is converted to the number 0.

Pitfall 4: Object vs. Primitive Comparison

When an object is compared with a primitive, JavaScript calls the object's valueOf() or toString() method.

Pitfall 5: Array Edge Cases

Empty arrays and arrays have their own conversion rules that can be confusing.

Pitfall 6: Multiple Type Conversions

When several operands are involved, the conversion rules become more complex.

Pitfall 7: NaN Comparison

NaN is a unique value; it is never equal to itself.

console.log(NaN == NaN)        // false
console.log(NaN === NaN)       // false
console.log(typeof NaN)        // "number"

// correct way to check
console.log(isNaN(NaN))        // true
console.log(Number.isNaN(NaN)) // true

Feel free to add more examples.