We know that variables in JavaScript can hold a Boolean value of true or false. As well as this, other JavaScript values equate to truthy or falsy. What does this mean? Variables that don’t have a Boolean data type are still treated in a similar as true or false. There are 7 falsy values in JavaScript and everything else it Truthy
Falsy
The 7 Falsy values are
- false
- 0
- 0n: zero as a BigInt
- “”: empty string
- null
- undefined
- NaN
We can check that the values are treated as false by assigning some falsy values to variables. Then using the ! operator we can console log if the statement is not true. Here we say if not test1 and not test2 and not test3 log "falsy".
const test1 = "" // empty string
const test2 = 0 // zero
const test3 = parseFloat("hi") // NaN
if(!test1 && !test2 && !test3){
console.log("falsy")
} // logs falsy
Truthy
Truthy values are everything that’s not in the above list. We can use similar code as above to check. You can see that even empty objects and arrays are truthy
const test1 = "hi" // non-empty string
const test2 = 2 // non-zero number
const test3 = {} // empty object
if(test1 && test2 && test3){
console.log("truthy")
} // returns truthy
The truth is out there: truth vs truthy
It is important to bear in mind that truth and truthy are not the same thing. As is also the case for falsy and false. While an if statement will work the same whether something is true or truthy, if you were to use === to check the equality the results would not be the same.
const test1 = "hi" === true // test1 is false
const test2 = 2 === true // test2 is false
const test3 = [] === true // test3 is false
If you need to you can turn falsy results to false and truthy results to true using !!. While "hi" is truthy !"hi" is false not falsy. Therefore !!"hi" is the opposite of false and is true, not truthy.
Applications
There are many use cases for truthy and falsy values. It can be very helpful when dealing with user input and catching errors as you can check whether something is null, undefined or NaN. You can also use it to check that a submitted form field is not blank as empty stings are falsy. There are of course plenty of other ways to do this but it is a useful thing to know.