The concept of truthy and falsy values is one of the quirks of JavaScript. It often confuses beginners and can even catch out more experienced developers. It’s also a question that can come up in a technical interview. So, it’s important to have a good grasp of truthy and falsy values.
In this article, you’ll learn:
- the concept of truthy and falsy values
- which values are truthy and falsy
- how to test if values are truthy or falsy
- uses and pitfalls
Before reading this article, it’s important that you have a basic understanding of conditional statements and data types in JavaScript.
What does truthy and falsy mean?
JavaScript is something of a weird language! One of its many quirks is that all values are coerced into either true
or false
“when encountered in a Boolean context”.
What does that even mean? Well, if you pass a value by itself into an if
statement, it will evaluate to either true
or false
.
Take a look at this simple example, what do you think the output will be for each if
statement?
if ('coffee') {
console.log('I evaluated to true')
} else {
console.log('I evaluated to false')
}
if ('') {
console.log('I evaluated to true')
} else {
console.log('I evaluated to false')
}
Did you get it right?
- The first statement will log
'I evaluated to true'
to the console. - The second statement will log
'I evaluated to false'
.
That’s because the string 'coffee'
is a truthy value and evaluates to true
. In contrast, an empty string (''
) is a falsy value and will evaluate to false
.
Before continuing, it's worth pointing out that refactoring the above if
statements as ternaries will yield the same result:
'coffee' ? console.log('true') : console.log('false') // logs 'true'
'' ? console.log('true') : console.log('false') // logs 'false'
Which values are falsy?
There are eight falsy values, though three of these are variations on the number 0
:
false
— perhaps unsurprisingly!0
-0
— negative zero0n
— aBigInt
number of value0
(read more about BigInt numbers on MDN)""
,''
— empty strings, more specifically strings of length0
null
undefined
NaN
— not a number
Which values are truthy?
All other values not listed above are truthy, including:
- empty objects, i.e.
{}
- empty arrays, i.e.
[]
- empty functions, i.e.
function() {}
- all strings with a length greater than
0
- all other numbers including
Infinity
and-Infinity
Testing values for truthiness and falsiness
In addition to if
statements and ternaries, you can test whether a value is truthy or falsy by using the Boolean
constructor:
console.log(Boolean('coffee')) // logs true
console.log(Boolean('')) // logs false
You can also use the double-negation (aka double-bang) operator:
console.log(!!'coffee') // logs true
console.log(!!'') // logs false
In both cases, the value 'coffee'
is being coerced into the Boolean value true
. And the empty string (''
) is being coerced in the Boolean value false
.
The usefulness of truthy and falsy values
Truthy and falsy values are useful because they allow you to write simpler conditional statements.
So, instead of:
const myStr = 'coffee'
const myNum = 42
if (myStr.length > 0) {
// if string not empty, do this
} else {
// if string empty, do something else
}
if (myNum !== 0) {
// if number is not zero, do somthing
} else {
// if number is zero, do this instead
}
You can write:
if (myStr) {
// if string not empty, do this
} else {
// if string empty, do something else
}
if (myNum) {
// if number is not zero, do somthing
} else {
// if number is zero, do this instead
}
Potential pitfalls
Code readability
Testing for the truthiness or falsiness of a value, rather than making a direct comparison, can make your code more difficult to read and understand for both yourself and other developers.
if(myStr.length > 0)
is more explicit than if(myStr)
. With if(myStr.length > 0)
, it’s much clearer what you’re testing for — is the length of the string greater than 0
?
Whereas if(myStr)
is ambiguous. It essentially reads as “is myStr
truthy or falsy?”, and may require the developer to dig a little deeper into the code.
Truthy and falsy are not Boolean values
Truthy and falsy are not the same as the Boolean values true
and false
. This often catches out beginners and is an important concept to grasp!
As you now know, the following code will log 'I evaluated to false'
to the console:
const empty = ''
if (empty) {
console.log('I evaluated to true')
} else {
console.log('I evaluated to false')
}
But, so will:
if(empty === false) {
console.log('I evaluated to true')
} else {
console.log('I evaluated to false')
}
Aha, so empty
does equal false
? Nope, if that was true
it would have logged 'I evaluated to true'
to the console!
Now, what do you think will get logged to the console in this snippet?
const fullOfCoffee = 'coffee'
if (fullOfCoffee === true) {
console.log('I evaluated to true')
} else {
console.log('I evaluated to false')
}
The answer is 'I evaluated to false'
because 'fullOfCoffee'
does not equal true
.
Strings
Only empty strings with a length of 0
are falsy values — don’t be fooled by white spaces!
For instance, ' '
may look empty but it’s not. It contains a single white space and has a length of 1
:
console.log(''.length) // logs 0
console.log(' '.length) // logs 1
console.log(!!' ') // logs true
This is why it’s often a good idea to trim your strings:
const emptyStr = ' '
console.log(emptyStr.length) // logs 3
console.log(emptyStr.trim().length) // logs 0
console.log(!!emptyStr) // logs true
console.log(!!emptyStr.trim()) // logs false
And be aware that the following strings are all truthy values:
'0'
'false'
'NaN'
'null'
'undefined'
Objects
Objects can also cause some confusion when it comes to truthy and falsy values. It’s worth mentioning here, that arrays and functions are also objects in JavaScript.
The following values are all truthy:
{} // empty object
function() {} // empty function
() => {} // empty function
() => false // function that returns false
[] // empty array
[false] // array containing Boolean value false
[0] // array containing 0
[null] // array containing null (or any other falsy value)
new Boolean(false) // Boolean object whose value is false
new Date() // Date object
Conclusion
Once you get a handle on them, truthy and falsy values can be very useful, allowing you to write terse conditionals.
But writing conditionals this way is less explicit and can reduce code readability. And empty objects, arrays containing falsy values and strings comprising just white space can throw a spanner in the works. It’s also important to understand that truthy and falsy values are different to the Boolean values true
and false
.
By the way, spell checkers really hate the words truthy, falsy and falsiness!