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.
- false (the boolean false value)
- 0 (number 0 including all decimal or zeroish number such as 0.0, 0.00, 0x0)
- 0n (represents bigint)
- ” “,’ ‘ (empty strings)
- null
- undefined
- 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
- “0” or ‘0’ (Any non-empty string is a truthy value including just spaces)
- ‘false’ (A string with value false)
- [] (An empty array)
- {} (An empty object
- -1 (A negative number)
- function() {} (An empty function)
- 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))
// 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