# null and undefined

by [kirupa](https://www.kirupa.com/me/index.htm) | filed under [JavaScript 101](https://www.kirupa.com/javascript/learn_javascript.htm)

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.

Onwards!

## Null

Let's start with `null`. The `null` keyword is 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:

```js
var name = null;

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

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:

```js
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.

## Undefined

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:

```js
let myVariable;
alert(myVariable); // undefined

function doNothing() {
   // watch paint dry
   return;
}

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

let person = {
  firstName: "Isaac",
  lastName: "Newton"
}
alert(person.title); // 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:

```js
if (myVariable === undefined) {
	// do something
}
```

The downside of this approach has to do with what `undefined` actually is. Brace yourself - `undefined` is a global variable that happens to be automatically defined for us, and this means we can potentially overwrite it to something like **true** or whatever else we want to set it to. If `undefined` ever gets overwritten, it would would break our code if we just check with a `===` or `==` even. To avoid any shenanigans around this, the safest way to perform a check for `undefined` involves `typeof` and the `===` operator:

```js
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 arm twists 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](http://www.senocular.com) (aka Trevor McCauley) for pointing this out!

## Conclusion

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.