Falsies

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.

About these ads

6 Comments

  1. Gordon said,

    July 27, 2008 at 5:03 am

    It might also be worthwhile to point out that, along with the number 0, the (non-empty) string “0″ is also falsy.

  2. Nosredna said,

    July 27, 2008 at 5:14 am

    “0″?

    Dang, I didn’t even think of that one. I’ll have to update that table.

  3. Joshua Paine said,

    July 27, 2008 at 7:06 pm

    “0″==false, but !!”0″===true and (“0″ ? true : false)===true.

  4. Nosredna said,

    July 28, 2008 at 1:06 am

    I realize now whey people use null for undefined. It looks pretty safe according to the chart. And it’s five less characters.

  5. brian said,

    February 10, 2009 at 8:47 pm

    [,] == 0 >>true
    [,,] == 0 >>false
    [0] == 0 >> true
    [12] == 12 >> true
    [" "] == 0 >> true
    [false] == false >> false !
    [false] == 0 >> false
    [0] == false >> true
    [null] == 0 >> true

  6. Supersha said,

    December 5, 2009 at 4:53 pm

    Great! I haven’t known them in the past. BTW, I like to view your website everyday.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: