Falsey values in JavaScript

I had an interesting interview question today that stumped me a little. I was asked about falsey values. So undefined, NaN, null, 0, and an empty string all evaluate to false. What is the reason this is useful to know in JavaScript? The only thing I can think of is instead of having to do this:

if (mystring === '' || mystring === undefined) { }

I can do this:

if (!m开发者_开发问答ystring)

Is this the only useful application?

One dangerous issue of falsey values you have to be aware of is when checking the presence of a certain property.

Suppose you want to test for the availability of a new property; when this property can actually have a value of 0 or "", you can't simply check for its availability using

if (!someObject.someProperty)
    /* incorrectly assume that someProperty is unavailable */

In this case, you must check for it being really present or not:

if (typeof someObject.someProperty == "undefined")
    /* now it's really not available */

Also be aware that NaN isn't equal to anything, even not to itself (NaN != NaN).

There are two separate issues with 'falsey' values in JavaScript.

Firstly there is the official conversion scheme, which is what is returned by Boolean(x). This returns false when x is false or 0 or NaN or null or undefined or "" and true otherwise. This is the same behaviour as the

if (condition) {/*true path*/} else {/*false path*/}

that is, the false path is executed if Boolean(condition) would have returned false and the true path is executed otherwise. This behaviour is often used to check to see if a property is defined. However, doing that is not safe unless you are certain that the property would be an object or an array if it is defined. The safest way to test if a property is defined is to do

if (property != null) { /*property is defined*/} 

which makes sure that the property is not null or undefined. If you only want to make sure the property is not undefined do

if (property !== undefined) { /*property is not undefined (but may be null)*/ } 

(notice the extra = in !==).

Secondly, there are all the values that == false. This is everything that can be coerced to 0 (which is what false gets coerced to). This includes all the values that convert to false except NaN (which can't == false by virtue of it never == anything), null and undefined. But it also includes all objects that when converted to a string and then converted to a number are equal to 0. For example, this includes everything that when converted to a string is either the empty string "" or "0" or "-0" or "+0" or "0x00" or "000" or "0e0" or "0.0000"...., for example,

({toString: function() {return "-00.0e000";}}) == false

is true. Interestingly, this includes the empty array, and any nesting of arrays containing only a single other item that returns an empty or 0 string since arrays rendered as strings show only the contents without the surrounding brackets. That is,

[[[[0]]]] == false; // Because [[[[0]]]].toString() === "0"
[] == false;
[[[""]]] == false;
["0"] == false;
[[({toString: function() {return "0";}})]] == false;

The full algorithm for calculating == false is described here.

The reason this matters is because it can lead to subtle, difficult to find bugs if you don't understand most of these rules. Most important takeaways are probably how the if (condition) works and that using === avoids most of the other crazy stuff.

It's important to understand how this works in JS, so you're not surprised. Not necessarily just what is falsey, but what is truthy and how they compare to each other.

One example is that '0' is considered equal to 0 with ==, but it is not equal to '' - though 0 is. JavaScript comparison isn't always transitive.

So this means that just because (foo==bar && bar==fizz) is true, (foo==fizz) is not always true. To go with the above example, '0'==0, and 0=='', but '0'!='' - because you're comparing strings in the latter instance, so they are compared as strings and not coerced to numbers.

It is important to know that 0 evaluates to false to prevent doing things like:

if(str.indexOf('foo'))

It's useful to detect if a browser is has specific predefined objects:

if(!!navigator.geolocation){
  // executes if the browser has geolocation support
}

if(!!document.createElement('canvas').getContext){
  // executes if the browser supports <canvas>
}

Explanation: navigator.geolocation is an object or undefined. In the case it's an object !navigator.geolocation will return false, if it's undefined it'll return true. So, to check if a browser has geolocation enabled, you want to 'flip' the boolean once more, by adding another !.

They're also useful for setting default values...

function foo(bar){
    alert(bar || "default");
}

I know a lot of people try to do

if (typeof(foo) === "undefined"){}

to get around falsiness, but that's got its own problems because

typeof(null) === "object"

for some reason