We call values that loosely evaluate to false “falsy.” What does “loosely” mean in this context? There are two comparison operators to test equivalence in JavaScript (== and ===). The first is loose, and the second is strict.
The results of the loose form are sometimes surprising, as you’ll soon find out.
What sorts of things are falsy? Douglas Crockford lists these: 0, NaN, the empty string(” or “”), false, null, undefined. In essence, they are the zero or false or empty versions of JavaScript’s various types.
Tripped Up
The worst trouble I have with falsy values are when I’m comparing to a number and I forget that 0 might be one of the numbers I’m going to get. I did this recently in my sorting post in the final bit of code. I used == when I should have used ===. (Note: I’ve since fixed the code in that post.)
I’ve had this blog post in my mind for about a month. I’ve been waiting for a stroke of brilliance to come so I could make all this falsy stuff completely clear once and for all. The stroke of brilliance never came, so I’ve decided to make a table for you that tell what falsy values loosely and strictly equal other falsy values.
| == / === | false | 0 | NaN | null | undefined | “” (empty string) | ” ” (white space) | [] | {} |
| false | yes/yes | yes/no | no/no | no/no | no/no | yes/no | yes/no | yes/no | no/no |
| 0 | yes/no | yes/yes | no/no | no/no | no/no | yes/no | yes/no | yes/no | no/no |
| NaN | no/no | no/no | no/no | no/no | no/no | no/no | no/no | no/no | no/no |
| null | no/no | no/no | no/no | yes/yes | yes/no | no/no | no/no | no/no | no/no |
| undefined | no/no | no/no | no/no | yes/no | yes/yes | no/no | no/no | no/no | no/no |
| “” (empty string) | yes/no | yes/no | no/no | no/no | no/no | yes/yes | no/no | yes/no | no/no |
| ” ” (white space) | yes/no | yes/no | no/no | no/no | no/no | no/no | yes/yes | no/no | no/no |
| [] | yes/no | yes/no | no/no | no/no | no/no | yes/no | no/no | no/no | no/no |
| {} | no/no | no/no | no/no | no/no | no/no | no/no | no/no | no/no | no/no |
In the table above, you see the result of each value when compared loosely (with ==), then when compared strictly (with ===). The next table tries to convert each value logically by negating the negation of it.
| value | !!value |
| false | false |
| 0 | false |
| NaN | false |
| null | false |
| undefined | false |
| “” (empty string) | false |
| ” ” (white space) | true |
| [] | true |
| {} | true |
Eye-Popping Results
Most interesting observations from the tables? How about NaN, which doesn’t even loosely equal itself? The empty object {} is the same way. They are the ultimate Dr. No’s. Interestingly, the empty array loosely equals false, 0, and the empty string.
A string of white space loosely equals more than I thought it would.
0 and false are pretty damned close to each other.
According to the first chart, NaN, null, undefined, and {} are not falsy, because they don’t equal false in a loose comparison. In the second chart, ” ” (white space), [], and {} and not falsy.
So, now you know why it’s safer to use ===. If you find a good use for ==, make sure you’ve thought hard about things that might go wrong. I might even go so far as to say you should comment every usage of ==, because it’s bound to be misunderstood in many cases.
Can you tell falsies when you see them? I used to think I could, but now I’m not so sure.
Dreaming In JavaScript 