Tag Archives: Truthy

Truthy and Falsy in JavaScript

Posted on by

Many times, we observe in JavaScript that some values when used in a boolean context, behave as true or false, this is not common in other languages. For many experienced developers, even they get used to it but it is a mystery while for new developers it is confusing.

These are not the boolean values but these are known as Truthy and Falsy values. Any value which behaves as a true value in a boolean context (like conditions, loops), called Truthy and the values that behave as false, are called Falsy values. Internally, JavaScript converts a value to true or false when used in the boolean context and this is called Type Coercion.

This also means that a single value can be used in conditions.

Falsy

As mentioned before, every value in JavaScript returns true and false when it is used in a Boolean context and the values that return false are called Falsy values. There are 7 falsy values in total in JavaScript.

  1. false (the boolean false value)
  2. 0 (number 0 including all decimal or zeroish number such as 0.0, 0.00, 0x0)
  3. 0n (represents bigint)
  4. ” “,’ ‘ (empty strings)
  5. null
  6. undefined
  7. NaN

To test, I wrote a generic function which writes Falsy or Truthy on console  with some examples as

function TruthyOrFalsy(val)
{
  return val ? console.log("Truthy") : console.log("Falsy");
}

// All the below call logs 'Falsy'
TruthyOrFalsy('')
TruthyOrFalsy("")
TruthyOrFalsy(0)
TruthyOrFalsy(null)
TruthyOrFalsy(undefined)
TruthyOrFalsy(NaN)

Now let’s discuss Truthy values.

Truthy

In simple words, any value which is not falsy is truthy. These values return true if used in a boolean context. Some important truthy values are

  1. “0” or ‘0’ (Any non-empty string is a truthy value including just spaces)
  2. ‘false’ (A string with value false)
  3. [] (An empty array)
  4. {} (An empty object
  5. -1 (A negative number)
  6. function() {} (An empty function)
  7. Infinity (infinity value)

Now let’s see some examples

// All the below call logs 'Truthy'
TruthyOrFalsy(' ')
TruthyOrFalsy(" ")
TruthyOrFalsy(" Some text")
TruthyOrFalsy("0")
TruthyOrFalsy(108)
TruthyOrFalsy(-108)
TruthyOrFalsy(Infinity)
TruthyOrFalsy([])
TruthyOrFalsy([0])
TruthyOrFalsy({})

In normal programming, this truthy and falsy behavior can be helpful in writing concise and readable code. The typeof operator with some of these values can be interesting so let’s see

// All the below call logs 'Truthy'
TruthyOrFalsy(typeof(undefined))
TruthyOrFalsy(typeof(null))
TruthyOrFalsy(typeof(NaN))
All the above are truthy value even the values used in typeof operators are falsy. For first, it even returns undefined but it is ‘undefined’ (string undefined) similar for next two examples. Second one returns ‘object’ and third one returns ‘number’.
These truthy values behave differently sometimes when used in comparison. Let’s see few

 

// Any falsy value wrapped under type becomes Truthy
TruthyOrFalsy(new Number(0))
TruthyOrFalsy(new Boolean(false))

// But comparing these truthy logs falsy
TruthyOrFalsy(new Number(0) == new Boolean(false))

Few other objects like [], [0], [[]] etc are although truthy values but returns false when compared with eatch other or even itself like [] == [].

Conclusion

Javascript is an interesting and powerful language and has some unique characteristics. In this post, we covered the truthy and falsy behavior of it. First we discussed all the Falsy values with examples and covered Truthy values later. As mentioned every value which is not Falsy is Truthy but it can be confusing sometimes and we discuss it with some with examples including typeof operator. Finally, we saw a behavior where even a few values are Truthy but returns true when used with ==.

Hope it helps.

Cheers
Brij