Understanding truthy & falsy values in JavaScript

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 zero
0n — a BigInt number of value 0 (read more about BigInt numbers on MDN)
"", '' — empty strings, more specifically strings of length 0
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!

caffeinated coding: a front-end blog