Understanding the Difference between null and undefined in JavaScript

It is quite common to confuse null and undefined, but there is an important difference between them.

null

Simply put, null is a JavaScript keyword that indicates the absence of a value. Surprisingly, if you run the following in your firebug console: console.log( typeof null ), you will see “object”. Don’t be fooled though. This object is not mutable, has no properties, and there is at all times only one instance of it. It simply evaluates to “no value”. Although, this is a perfectly valid value in JavaScript. If you want to strip a variable of any value, assign it to “null”.

Example # 1

var foo = {};
console.log("foo is a type: " + typeof foo); //foo is a type: object
var foo = null;
console.log("foo is a type: " + typeof foo); //foo is a type: object
console.log("the value of foo is: " + foo); //the value of foo is: null

var foo = {};

console.log("foo is a type: " + typeof foo); //foo is a type: object

var foo = null;

console.log("foo is a type: " + typeof foo); //foo is a type: object

console.log("the value of foo is: " + foo); //the value of foo is: null

In Example # 1, we created an object called “foo”. The console.log statements demonstrate the odd, yet perfectly valid behavior of “null”. At first, the type of foo is “object”. After we assign foo to null, it is still an “object” type, yet when we console.log the value of foo, it is simply “null”.

undefined

In JavaScript, “undefined” is a global variable (a property of the global object), that is created at run time. This global variable represents something that has not been initialized. It also represents an object property or array index that does not exist. Also, when you do not supply an argument for a function parameter, it will have the value of “undefined”. Furthermore, when a function does not return a value, it returns “undefined”. Have you ever wondered why sometimes when you execute a function in the FireBug console, you see “undefined” in the console? That is because while your function may actually do something wonderful, if it does not explicitly return a value, then it returns “undefined”.

Example # 2

console.log("foo is a type: " + typeof foo); //foo is a type: undefined
console.log("the value of foo is: " + foo); // ReferenceError: foo is not defined

1 2	console.log("foo is a type: " + typeof foo); //foo is a type: undefined console.log("the value of foo is: " + foo); // ReferenceError: foo is not defined

In Example # 2, when we attempt to determine what type “undefined” is, we are told that it is of the type “undefined”. Hence, there is only one instance of the “undefined” value, and it has the value of “undefined” (do you have a headache yet?). In the second line, we attempt to output the value of foo to the console, but we get a “ReferenceError”. This is because while asking what the type of an undeclared variable is does not harm anyone (it is the type “undefined”), attempting to access that variable causes an error because it essentially does not exist. But, if we assigned foo to “null”, and then tried to access it, no problem. This is because if we assign foo to “null”, it has a value, and that value is “null” (i.e. “no value”). But when something evaluates to “undefined”, it does not exist.

Summary

In JavaScript, “null” and “undefined” have different meanings. While “null” is a special keyword that indicates an absence of value, “undefined” means “it does not exist”.

Helpful links for JavaScript “null” and “undefined”

http://saladwithsteve.com/2008/02/javascript-undefined-vs-null.html

http://weblogs.asp.net/bleroy/archive/2005/02/15/Three-common-mistakes-in-JavaScript-_2F00_-EcmaScript.aspx

http://sharkysoft.com/tutorials/jsa/content/045.html

Understanding the difference between null and undefined in JavaScript