About null and undefined

by kirupa   |   4 April 2014

One of the great mysteries of the world revolves around making sense of null and undefined. Most code you see is littered with them, and you've probably run into them yourself a few times. As mysteries go, making sense of null and undefined isn't particulary bizarre. It is just dreadfully boring...like the most boring (yet important) thing about JavaScript you'll ever have to learn.


OMG! A JavaScript Book Written by Kirupa?!!

To kick your JavaScript skills into outer space, everything you see here and more (with all its casual clarity!) is available in both paperback and digital editions.



Let's start with null. The null keyword is sort of also a primitive that fills a special role in the world of JavaScript. It is an explicit definition that stands for no value. If you've ever browsed through code others have written, you'll probably see null appear quite a number of times. It is quite popular, for the advantage of null lies in its definitiveness. Instead of having variables contain stale values or mystery undefined values, setting it to null is a clear indication that you want the value to not exist.

This advantage is important when you are writing code and want to initialize or clear a variable to something that represents nothing.

Here is an example:

var name = null;

if (name === null) {
	name = "Peter Griffin";
} else {
	name = null;

The null primitive isn't a naturally occuring resource. It is something something you consciously assign, so you will often see it used as part of variable declarations or passed in as arguments to function calls. Using null is easy. Checking for its existience is pretty easy as well:

if (name === null) {
	// do something interesting...or not

The only thing to note is that you should use the === operator instead of the lowly == one. While the world won't end if you use ==, it's good practice to check for both type and value when working with null.

Is null a primitive or an object?

The null primitive is similar to your string and boolean built-in types in that it also has an object representation. There is one quirk you need to note, though. Despite what I just said, doing typeof null at any given time will show it as being an object. That isn't how a primitive behaves, and the reason for this behavior has to do with a longstanding bug in the JavaScript language. The word on the street is that this bug may get fixed in the future, so...yeah!


Here is where things get a little interesting. To represent something that isn't defined, you have the undefined primitive. You see undefined in a few cases. The most common ones are when you try to access a variable that hasn't been initialized or when accessing the value of a function that doesn't actually return anything.

Here is a code snippet that points out undefined in a few of its natural habitats:

var myVariable;
alert(myVariable); // undefined

function doNothing() {
    // watch paint dry

var weekendPlans = doNothing();
alert(weekendPlans); // undefined

In your code, you probably won't be assigning undefined to anything. Instead, you will spend time checking to see if the value of something is undefined. You have several ways to perform this check. The first is a naive way that usually almost always works:

if (myVariable == undefined) {
	// do something

The downside of this approach is that you could potentially overwrite undefined to something like true, and that would break your code. The safest way to perform a check for undefined involves typeof and the === operator:

var myVariable;

if (typeof myVariable === "undefined") {
    alert("Define me!!!");

This ensures that you will perform a check for undefined and always return the correct answer.

null == undefined, but null !== undefined

Continuing the == and === weirdnesses, if you ever check for null == undefined, the answer will be a true. If you use === and have null === undefined, the answer in this case will be false.

The reason is that == does type coercion where it armtwists types to conform to what JavaScript thinks the value should be. Using ===, you check for both type and value. This is a more comprehensive check that detects that undefined and null are indeed two different things.

A hat tip to senocular (aka Trevor McCauley) for pointing this out!


There is a reason why I saved these built-in types for last. Null and undefined are the least exciting of the bunch, but they are also often the ones that are the most misunderstood. Knowing how to use null and detecting for it and undefined is a very important skill to get right. Not getting it right will lead to very subtle errors that are going to be hard to pinpoint.

If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!


Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!

( View past issues for an idea of what you've been missing out on all this time! )



Serving you freshly baked content since 1998!

Killer hosting by (mt) mediatemple

Facebook Twitter Youtube Pinterest Instagram Github
new books - yay!!!