Type Coercion

Implicit Coercion

JavaScript automatically converts types in certain contexts.

String Coercion

// + operator with string
'5' + 3;      // "53" (number to string)
'5' + true;   // "5true"
'5' + null;   // "5null"

// Template literals
`Age: ${25}`; // "Age: 25"

Number Coercion

// - * / operators
'5' - 3;      // 2 (string to number)
'5' * 2;      // 10
'10' / 2;     // 5

// Unary +
+'5';         // 5
+true;        // 1
+false;       // 0
+null;        // 0
+undefined;   // NaN
+'';          // 0

Boolean Coercion

// if statement
if ('hello') { }  // true
if (0) { }        // false
if ('') { }       // false
if (null) { }     // false
if (undefined) { } // false
if (NaN) { }      // false
if ([]) { }       // true (non-empty)
if ({}) { }       // true (always)

Logical Operators

// || returns first truthy value
'' || 'default';  // "default"
0 || 'default';   // "default"
'hello' || 'world'; // "hello"

// && returns first falsy value or last value
'hello' && 'world'; // "world"
'' && 'world';      // ""

Equality Coercion

// == with coercion
'5' == 5;      // true (string to number)
'0' == false;  // true
'' == false;   // true
null == undefined; // true

Common Gotchas

[] + [];       // "" (both to string)
[] + {};       // "[object Object]"
{} + [];       // 0 (unary + on [])
'3' - 1;       // 2
'3' + 1;       // "31"

Explicit Coercion

Deliberate type conversion.

To String

String(123);      // "123"
String(true);     // "true"
String(null);     // "null"
String(undefined); // "undefined"

// Or use methods
(123).toString();   // "123"
true.toString();    // "true"

To Number

Number('123');      // 123
Number('123abc');   // NaN
Number('');         // 0
Number(true);       // 1
Number(false);      // 0
Number(null);       // 0
Number(undefined);  // NaN

// parseInt / parseFloat
parseInt('123abc');   // 123
parseInt('abc123');   // NaN
parseInt('123', 10);  // 123 (base 10)
parseFloat('12.5abc'); // 12.5

// Unary +
+'123';      // 123
+true;        // 1
+'';          // 0

To Boolean

Boolean(0);         // false
Boolean('');        // false
Boolean(null);      // false
Boolean(undefined); // false
Boolean(NaN);       // false
Boolean('hello');   // true
Boolean(123);       // true
Boolean([]);        // true
Boolean({});        // true

// Double negation
!!0;         // false
!!'hello';   // true

Best Practices

// Use explicit conversion
const num = Number('123');
const str = String(123);
const bool = Boolean(value);

// Avoid implicit in complex expressions
// Bad
if (value == '0') { }

// Good
if (value === '0') { }

Equality Comparisons

== vs ===

// == (loose equality) - with coercion
'5' == 5;        // true
'0' == false;    // true
null == undefined; // true
'' == false;     // true

// === (strict equality) - no coercion
'5' === 5;       // false
'0' === false;   // false
null === undefined; // false
'' === false;    // false

!= vs !==

// != (loose inequality)
'5' != 5;        // false
'5' != 6;        // true

// !== (strict inequality)
'5' !== 5;       // true
'5' !== 6;       // true

Object Equality

// Objects are compared by reference
const a = [1, 2, 3];
const b = [1, 2, 3];
const c = a;

a === b;  // false (different references)
a === c;  // true (same reference)

// Deep equality check
function deepEqual(x, y) {
  if (x === y) return true;
  if (typeof x !== 'object' || typeof y !== 'object') return false;
  const keysX = Object.keys(x);
  const keysY = Object.keys(y);
  if (keysX.length !== keysY.length) return false;
  return keysX.every(key => 
    y.hasOwnProperty(key) && deepEqual(x[key], y[key])
  );
}

Truthy and Falsy Values

// Falsy values
false, 0, -0, 0n, '', null, undefined, NaN

// Truthy values (everything else)
true, 'hello', 42, [], {}, function(){}, Symbol('')

// Common gotchas
Boolean('0');    // true (non-empty string)
Boolean(0);      // false
Boolean('');     // false

Best Practice

// Always use === and !==
// Avoid == unless you specifically need coercion
if (value === null || value === undefined) {
  // Handle both
}