Truthy and Falsy: When All is Not Equal in JavaScript

JavaScript variables are loosely/dynamically typed and the language doesn't care how a value is declared or changed.

2017.07.12: This article has been updated to reflect the current state of the JavaScript ecosystem.

let x;
x = 1;   // x is a number
x = '1'; // x is a string
x = [1]; // x is an array

Seemingly different values equate to true when compared with == (loose or abstract equality) because JavaScript (effectively) converts each to a string representation before comparison:

// all true
1 == '1';
1 == [1];
'1' == [1];

A more obvious false result occurs when comparing with === (strict equality) because the type is considered:

// all false
1 === '1';
1 === [1];
'1' === [1];

Internally, JavaScript sets a value to one of six primitive data types:

• Undefined (a variable with no defined value)
• Null (a single null value)
• Boolean (true or false)
• Number (this includes Infinity and NaN - not a number!)
• String (textual data)
• Symbol (a unique and immutable primitive new to ES6/2015)

Everything else is an Object — including arrays.

Truthy and Falsy

As well as a type, each value also has an inherent boolean value, generally known as either truthy or falsy. Some of the rules are a little bizarre so understanding the concepts and effect on comparison helps when debugging JavaScript applications.

The following values are always falsy:

• false
• 0 (zero)
• '' or "" (empty string)
• null
• undefined
• NaN (e.g. the result of 1/0)

Everything else is truthy. That includes:

• '0' (a string containing a single zero)
• 'false' (a string containing the text "false")
• [] (an empty array)
• {} (an empty object)
• function(){} (an "empty" function)

A single value can therefore be used within conditions, e.g.

if (value) {
  // value is truthy
}
else {
  // value is falsy
  // it could be false, 0, '', null, undefined or NaN
}

Loose Equality Comparisons With ==

Unexpected situations can occur when comparing truthy and falsy values using the == loose equality:

==	true	false	0	''	null	undefined	NaN	Infinity	[]	{}
true	true	false	false	false	false	false	false	false	false	false
false	false	true	true	true	false	false	false	false	true	false
0	false	true	true	true	false	false	false	false	true	false
''	false	true	true	true	false	false	false	false	true	false
null	false	false	false	false	true	true	false	false	false	false
undefined	false	false	false	false	true	true	false	false	false	false
NaN	false	false	false	false	false	false	false	false	false	false
Infinity	false	false	false	false	false	false	false	true	false	false
[]	false	true	true	true	false	false	false	false	true	false
{}	false	false	false	false	false	false	false	false	false	true

Continue reading %Truthy and Falsy: When All is Not Equal in JavaScript%

by Craig Buckler via SitePoint