For a beginner, it is painful to understand two distinct things null & undefined in JavaScript and use them properly. I noticed many people consider and treat undeclared variable as undefined which is wrong perception. In this article, we will go through null, undefined, empty, NaN and undeclared variables and see how to handle them in different conditions.

Undefined

It means a variable has been declared but has not yet been assigned a value

var a;
console.log(a); //undefined
console.log(typeof a); // undefined

You can see type is also undefined.

Null

It can be assigned to a variable to represent no value. It is an assignment value.

var b = null;
console.log(b); //null
console.log(typeof b); //object

Here the type is object.

Undeclared

If a variable is not declared then the browser throws error.

console.log(nonDeclaredVariable);

// Uncaught ReferenceError: nonDeclaredVariable is not defined
//    at <anonymous>:1:13

console.log(typeof nonDeclaredVariable); //undefined

Here the type is undefined. So you can check undeclared variable by checking its type:

if( typeof nonDeclaredVariable !== 'undefined' ) {
    // Do something here
}

Note: If you use var when you're declaring a variable inside a function, then that variable becomes a local variable. However, if you don't use var, then the variable becomes a global variable no matter where you declare it.

If any property is not declared then NO error is thrown, it returns undefined.

var myVar = {};
console.log(myVar.myProp); //undefined 

NaN

It represents "Not-a-Number" value. This property indicates that a value is not a legal number.

var c = NaN;
console.log(c); //NaN
console.log(typeof c); //number

Empty String ("")

It represents blank string

var d = "";
console.log(d); //
console.log(typeof d); //string

Before we go ahead, let's see one interesting thing:

undefined == null

Yes == is true but === is false.

console.log(undefined == null); //true
console.log(undefined === null); //false

Based on == all below if conditions are same:

if (myVar === undefined || myVar === null)
if (myVar == undefined)
if (myVar == null)

Similarly, the following conditions are also same:

if (myVar !== undefined && myVar !== null)
if (myVar != undefined)
if (myVar != null)

We will further optimize it in a case.

!! (Double Not-Operator)

!! converts a value (null, undefined, objects etc…) to a primitive Boolean value. It can be used to check the truthiness of the variable.

!myVar is inverted boolean value and !!myVar is non inverted value means represents true boolean value. let's check boolean value of different values:

console.log(!!undefined); //false
console.log(!!null); //false
console.log(!!NaN); //false
console.log(!!''); //false
console.log(!!0); //false

All above represent the Falsy values. let's see some more values.

console.log(!!{}); //true
console.log(!![]); //true
console.log(!!1); //true
console.log(!!'test'); //true
console.log(!!-1); //true

As you can see empty object and array represents Truthy values.

If you want to check whether the variable has value:

if (myvar !== null && myvar !== undefined  && myvar === myvar  && myvar!== '' && myvar !== 0 && myvar !== false)

if (myVar)

Both are same and will allow all Truthy values (myvar === myvar is used to test NaN. In case of NaN, myvar !== myvar will be true).

Similarly, the following conditions are same and accept Falsy values

if (myvar === null || myvar === undefined || myvar !== myvar  || myvar=== '' || myvar === 0 || myvar === false)

if (!myvar)   

Let's see one common case:

var myVar = 'default';
if (myVar2 !== null && myVar2 !== undefined && myVar2 !== '') {
     myVar = myVar2;
}

can be written as:

var myVar = myVar2 || 'default';

Void 0

void 0 returns undefined. In modern browsers (which supports javascript 1.8.5), undefined is not writable so void 0 and undefined most likely the same. For older browser, undefined is actually a global property and can be changed, It is better to use void 0.

var undefined = 1;
console.log(undefined);  //1

void 0 is safer and can be used in place of undefined. One more advantage is to less type than undefined :)

var myVar;
console.log(myVar === void 0); //true

Conclusion

In this post, we saw the differences among undefined, null, NaN, empty string and undeclared variable & properties. Also went through !! (Double Not-Operator), checked Truthy, Falsy values and shorthand the commonly used if conditions.

If you want to validate both declaration and Truthy value for a variable:

if (typeof myVar != 'undefined' && myVar) {
    //work with myVar'
};

For undeclared properties, no need to use typeof, just check for truthy value

if (myVar.myProp) {
    //work with myVar.myProp'
};

That's it. Hope it helps. Feel free to share how you handle JavaScript undefined and null values or any tips and tricks in the comments.

Enjoy JavaScript!!