What is Type Coercion?

Type coercion is the automatic or implicit conversion of values from one data type to another. It's a common feature in dynamically typed languages like JavaScript, where variables are not bound to specific data types and can change their type at runtime. Coercion happens when operands of different types are involved in an operation, or when a value is used in a context that expects a different type (e.g., a number used where a string is expected).

Implicit Coercion

This occurs automatically, without any explicit action from the developer, during operations like:

• Arithmetic Operations: When you try to add a number and a string, JavaScript might coerce the number to a string.
• Loose Equality (==): The loose equality operator performs type coercion before comparing values.
• Logical Contexts: Values are coerced to booleans in if statements, &&, ||, or ! operations.

Coercion to String

When you use the + operator with a string and another type, the non-string operand is typically converted to a string.

let num = 5;
let str = "Hello ";
let result = str + num; // 'Hello 5' (number 5 is coerced to string "5")

let bool = true;
let anotherResult = "The answer is " + bool; // 'The answer is true' (boolean true is coerced to string "true")

Coercion to Number

This happens in most arithmetic operations (-, *, /, %), unary plus (+), and comparison operators (<, >, etc.).

let s1 = "10";
let s2 = "5";
let subtraction = s1 - s2; // 5 (strings "10" and "5" coerced to numbers)

let x = "123";
let y = +"123"; // 123 (unary plus coerces string to number)

let emptyString = "";
let value = +emptyString; // 0 (empty string coerced to number 0)

let isNull = null;
let numNull = +isNull; // 0 (null coerced to number 0)

let isUndefined = undefined;
let numUndefined = +isUndefined; // NaN (undefined coerced to NaN)

Coercion to Boolean

This occurs in logical contexts (if conditions, &&, ||, !, Boolean() constructor without new). Values are classified as either truthy or falsy.

• Falsy values: false, 0 (and -0), "" (empty string), null, undefined, NaN, document.all (legacy browser edge case).
• Truthy values: All other values, including [] (empty array), {} (empty object), " " (string with space), "0" (string "0"), and any non-zero number.

if ("hello") {
  console.log("This will run because 'hello' is truthy."); // Runs
}

if (0) {
  console.log("This will not run because 0 is falsy."); // Does not run
}

let myVar = "someValue";
let isTruthy = !!myVar; // true (double negation explicitly coerces to boolean)

let isFalsy = !0; // true (0 is falsy, !0 is true)

Explicit Coercion (Type Conversion)

This is when a developer intentionally converts a value from one type to another using built-in functions or constructors.

• Number(): Converts a value to a number.
• String(): Converts a value to a string.
• Boolean(): Converts a value to a boolean.
• parseInt() / parseFloat(): Parses a string to an integer or a floating-point number, respectively.

let strNum = "123.45";
let numValue = Number(strNum); // 123.45 (explicit conversion to number)

let myNum = 42;
let strValue = String(myNum); // "42" (explicit conversion to string)

let valueToBool = Boolean("hello"); // true
let anotherValueToBool = Boolean(0); // false

let parsedInt = parseInt("100px"); // 100
let parsedFloat = parseFloat("100.5em"); // 100.5
let parsedInvalid = parseInt("abc"); // NaN

The `typeof` Operator

The typeof operator is a unary operator that returns a string indicating the type of its unevaluated operand. It's an essential tool for type checking and for writing conditional logic based on the data type of a variable.

Syntax

typeof operand;

Or:

typeof(operand);

Both are valid, but the first form is more commonly used.

Return Values of `typeof`

The typeof operator returns one of the following strings:

• "undefined": If the operand is undefined.
• "boolean": If the operand is a boolean.
• "number": If the operand is a number (including NaN and Infinity).
• "string": If the operand is a string.
• "bigint": If the operand is a BigInt.
• "symbol": If the operand is a Symbol.
• "function": If the operand is a function.
• "object": If the operand is null, an array, or any other object.

Examples and Common Gotchas

console.log(typeof 42);             // "number"
console.log(typeof "hello");        // "string"
console.log(typeof true);           // "boolean"
console.log(typeof undefined);      // "undefined"
console.log(typeof Symbol('id'));   // "symbol"
console.log(typeof 123n);           // "bigint" (ES2020)

console.log(typeof function() {});  // "function"
console.log(typeof class MyClass {}); // "function" (classes are syntactic sugar over functions)

// The famous typeof null bug:
console.log(typeof null);           // "object" (This is a long-standing bug in JavaScript that cannot be fixed due to backward compatibility. null is NOT an object.)

// Objects and Arrays:
console.log(typeof {});             // "object"
console.log(typeof []);             // "object" (Arrays are a type of object)

// NaN:
console.log(typeof NaN);            // "number" (NaN is a special numeric value)

Using `typeof` for Type Checking

typeof is excellent for checking primitive types. However, for more complex types like arrays or specific object instances, it falls short because it returns "object" for both arrays and plain objects (and even null).

function processInput(value) {
  if (typeof value === "string") {
    console.log("Input is a string:", value.toUpperCase());
  } else if (typeof value === "number") {
    console.log("Input is a number:", value * 2);
  } else {
    console.log("Input is of an unknown type.");
  }
}

processInput("hello"); // Input is a string: HELLO
processInput(10);      // Input is a number: 20
processInput(true);    // Input is of an unknown type.

// To check for arrays, use Array.isArray():
let arr = [1, 2, 3];
console.log(typeof arr);         // "object"
console.log(Array.isArray(arr)); // true

// To check for specific object instances, use instanceof:
class Dog {}
let myDog = new Dog();
console.log(typeof myDog);       // "object"
console.log(myDog instanceof Dog); // true

Best Practices and Pitfalls

• Prefer Strict Equality (===) over Loose Equality (==): The === operator compares values without performing any type coercion, ensuring both value and type are identical. This prevents unexpected behavior caused by implicit coercion.

  console.log(5 == "5");   // true (5 is coerced to "5")
  console.log(5 === "5");  // false (types are different)
  
  console.log(null == undefined); // true (both represent absence of value)
  console.log(null === undefined); // false (different types)

• Understand Falsy/Truthy Values: Be aware of which values coerce to false in a boolean context to write robust conditional statements.
• Be Explicit with Conversions: When you intend to change a type, use explicit conversion functions like Number(), String(), or Boolean(). This makes your code clearer and less prone to coercion-related bugs.
• Combine `typeof` with Other Checks: For comprehensive type checking, especially with non-primitive types, don't rely solely on typeof. Use Array.isArray() for arrays and instanceof for custom objects.