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.

JavaScript-truthy-falsy

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:

==truefalse0''nullundefinedNaNInfinity[]{}
truetruefalsefalsefalsefalsefalsefalsefalsefalsefalse
falsefalsetruetruetruefalsefalsefalsefalsetruefalse
0falsetruetruetruefalsefalsefalsefalsetruefalse
''falsetruetruetruefalsefalsefalsefalsetruefalse
nullfalsefalsefalsefalsetruetruefalsefalsefalsefalse
undefinedfalsefalsefalsefalsetruetruefalsefalsefalsefalse
NaNfalsefalsefalsefalsefalsefalsefalsefalsefalsefalse
Infinityfalsefalsefalsefalsefalsefalsefalsetruefalsefalse
[]falsetruetruetruefalsefalsefalsefalsetruefalse
{}falsefalsefalsefalsefalsefalsefalsefalsefalsetrue

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


Source: Sitepoint