How to check for an undefined or null variable in JavaScript?

How to check for an undefined or null variable in JavaScript?

We are frequently using the following code pattern in our JavaScript code
if (typeof(some_variable) != ‘undefined’ && some_variable != null)
{
// Do something with some_variable
}

Is there a less verbose way of checking that has the same effect?
According to some forums and literature saying simply the following should have the same effect.
if (some_variable)
{
// Do something with some_variable
}

Unfortunately, Firebug evaluates such a statement as error on runtime when some_variable is undefined, whereas the first one is just fine for it. Is this only an (unwanted) behavior of Firebug or is there really some difference between those two ways?

Solutions/Answers:

Solution 1:

You have to differentiate between cases:

  1. Variables can be undefined or undeclared. You’ll get an error if you access an undeclared variable in any context other than typeof.
if(typeof someUndeclaredVar == whatever) // works
if(someUndeclaredVar) // throws error

A variable that has been declared but not initialized is undefined.

let foo;
if (foo) //evaluates to false because foo === undefined
  1. Undefined properties , like someExistingObj.someUndefProperty. An undefined property doesn’t yield an error and simply returns undefined, which, when converted to a boolean, evaluates to false. So, if you don’t care about
    0 and false, using if(obj.undefProp) is ok. There’s a common idiom based on this fact:

    value = obj.prop || defaultValue
    

    which means “if obj has the property prop, assign it to value, otherwise assign the default value defautValue“.

    Some people consider this behavior confusing, arguing that it leads to hard-to-find errors and recommend using the in operator instead

    value = ('prop' in obj) ? obj.prop : defaultValue
    

Solution 2:

I think the most efficient way to test for “value is null or undefined” is

if ( some_variable == null ){
  // some_variable is either null or undefined
}

So these two lines are equivalent:

if ( typeof(some_variable) !== "undefined" && some_variable !== null ) {}
if ( some_variable != null ) {}

Note 1

As mentioned in the question, the short variant requires that some_variable has been declared, otherwise a ReferenceError will be thrown. However in many use cases you can assume that this is safe:

check for optional arguments:

function(foo){
    if( foo == null ) {...}

check for properties on an existing object

if(my_obj.foo == null) {...}

On the other hand typeof can deal with undeclared global variables (simply returns undefined). Yet these cases should be reduced to a minimum for good reasons, as Alsciende explained.

Note 2

This – even shorter – variant is not equivalent:

if ( !some_variable ) {
  // some_variable is either null, undefined, 0, NaN, false, or an empty string
}

so

if ( some_variable ) {
  // we don't get here if some_variable is null, undefined, 0, NaN, false, or ""
}

Note 3

In general it is recommended to use === instead of ==.
The proposed solution is an exception to this rule. The JSHint syntax checker even provides the eqnull option for this reason.

From the jQuery style guide:

Strict equality checks (===) should be used in favor of ==. The only
exception is when checking for undefined and null by way of null.

// Check for both undefined and null values, for some important reason. 
undefOrNull == null;

Solution 3:

Checking null with normal equality will also return true for undefined.

if (window.variable == null) alert('variable is null or undefined');

JS Equality

Solution 4:

In newer JavaScript standards like ES5 and ES6 you can just say

> Boolean(0) //false
> Boolean(null)  //false
> Boolean(undefined) //false

all return false, which is similar to Python’s check of empty variables.
So if you want to write conditional logic around a variable, just say

if (Boolean(myvar)){
   // Do something
}

here “null” or “empty string” or “undefined” will be handled efficiently.

Solution 5:

If you try and reference an undeclared variable, an error will be thrown in all JavaScript implementations.

Properties of objects aren’t subject to the same conditions. If an object property hasn’t been defined, an error won’t be thrown if you try and access it. So in this situation you could shorten:

 if (typeof(myObj.some_property) != "undefined" && myObj.some_property != null)

to

if (myObj.some_property != null)

With this in mind, and the fact that global variables are accessible as properties of the global object (window in the case of a browser), you can use the following for global variables:

if (window.some_variable != null) {
    // Do something with some_variable
}

In local scopes, it always useful to make sure variables are declared at the top of your code block, this will save on recurring uses of typeof.

Solution 6:

Firstly you have to be very clear about what you test. JavaScript has all sorts of implicit conversions to trip you up, and two different types of equality comparator: == and ===.

A function, test(val) that tests for null or undefined should have the following characteristics:

 test(null)         => true
 test(undefined)    => true
 test(0)            => false
 test(1)            => false
 test(true)         => false
 test(false)        => false
 test('s')          => false
 test([])           => false

Let’s see which of the ideas here actually pass our test.

These work:

val == null
val === null || val === undefined
typeof(val) == 'undefined' || val == null
typeof(val) === 'undefined' || val === null

These do not work:

typeof(val) === 'undefined'
!!val

I created a jsperf entry to compare the correctness and performance of these approaches. Results are inconclusive for the time being as there haven’t been enough runs across different browsers/platforms. Please take a minute to run the test on your computer!

At present, it seems that the simple val == null test gives the best performance. It’s also pretty much the shortest. The test may be negated to val != null if you want the complement.