Type Coercion in JavaScript

JavaScript is a dynamically typed, loosely typed language. This means variables are not bound to a specific data type, and the language will automatically attempt to convert data types as needed during operations. This process is called Type Coercion.

Coercion can be broken down into two categories: Explicit and Implicit.

1. Explicit Coercion (Type Casting)

Explicit coercion occurs when a developer intentionally converts a value from one type to another using built-in functions like String(), Number(), or Boolean().

// Number to String
const str = String(123); // "123"

// String to Number
const num = Number("456"); // 456

// Any type to Boolean
const bool = Boolean(1); // true

2. Implicit Coercion

Implicit coercion happens automatically by the JavaScript engine behind the scenes. This usually occurs when you apply operators to values of different types.

String Coercion (The + Operator)

If the + operator is used and at least one operand is a string, JavaScript will coerce the other operand to a string and concatenate them.

1 + "2"      // "12"
"Hello " + 5 // "Hello 5"
[1, 2] + ""  // "1,2"

Numeric Coercion (Math Operators)

When using mathematical operators other than + (such as -, *, /, %), JavaScript will attempt to coerce strings or other types into numbers.

"10" - 5   // 5
"10" * "2" // 20
"10" / "2" // 5
"apple" - 2 // NaN (Not a Number)
true + 1   // 2 (true is coerced to 1)
false + 10 // 10 (false is coerced to 0)
null + 5   // 5 (null is coerced to 0)
undefined + 5 // NaN (undefined is coerced to NaN)

3. Truthy and Falsy Values

When JavaScript expects a boolean (like in an if statement or a logical operator), it coerces values to true or false.

Falsy values (coerced to false): There are exactly 6 falsy values in JavaScript:

1. false
2. 0 (including -0 and 0n for BigInt)
3. "" (empty string)
4. null
5. undefined
6. NaN

Truthy values: Everything else is truthy. This includes empty arrays [] and empty objects {}.

if ("") {
  // won't execute
}

if ([]) {
  // WILL execute!
}

4. == (Loose Equality) vs === (Strict Equality)

Strict Equality (===)

Checks if both the value and the type are the same. No coercion takes place.

42 === 42    // true
42 === "42"  // false

Loose Equality (==)

Also known as the Abstract Equality Comparison. If the operands are of different types, JavaScript will attempt to coerce them into the same type before comparing.

42 == "42"    // true (string "42" becomes number 42)
true == 1     // true (boolean true becomes 1)
null == undefined // true (special rule in JS)
0 == false    // true
"" == 0       // true

The Best Practice

Because loose equality (==) has complicated and sometimes counter-intuitive coercion rules, the widely accepted best practice is to always use strict equality (=== and !==) to avoid subtle bugs.

Summary

• Explicit coercion is intentional and predictable (Number("5")).
• Implicit coercion happens automatically during operations (5 * "5").
• Falsy values are false, 0, "", null, undefined, and NaN.
• Always use === over == to prevent unexpected coercion behaviors in comparisons.