JavaScript for impatient programmers (beta)
Please support this book: buy it or donate
(Ad, please don’t block.)

12. The non-values undefined and null

12.1. undefined vs. null

Many programming languages, especially object-oriented ones, have the non-value null indicating that a variable does not currently point to an object. For example, when it hasn’t been initialized, yet.

In addition to null, JavaScript also has the similar non-value undefined. So what is the difference between them? This is a rough description of how they work:

In reality, both non-values are often used interchangeably and many approaches for detecting undefined also detect null.

We’ll soon see examples of where the two are used, which should give you a clearer idea of their natures.

12.1.1. The history of undefined and null

When it came to picking one or more non-values for JavaScript, inspiration was taken from Java where initialization values depend on the static type of a variable:

Therefore, the original idea was:

12.2. Occurrences of undefined and null

The following subsections describe where undefined and null appear in the language. We’ll encounter several mechanisms that are explained in more detail later in this book.

12.2.1. Occurrences of undefined

Uninitialized variable myVar:

let myVar;
assert.equal(myVar, undefined);

Parameter x is not provided:

function func(x) {
  return x;
}
assert.equal(func(), undefined);

Property .unknownProp is missing:

const obj = {};
assert.equal(obj.unknownProp, undefined);

If you don’t explicitly specify the result of a function via the return operator, JavaScript returns undefined for you:

function func() {}
assert.equal(func(), undefined);

12.2.2. Occurrences of null

Last member of a prototype chain:

> Object.getPrototypeOf(Object.prototype)
null

Result if a regular expression /a/ does not match a string 'x':

> /a/.exec('x')
null

The JSON data format does not support undefined, only null:

> JSON.stringify({a: undefined, b: null})
'{"b":null}'

12.3. Checking for undefined or null

Checking for either:

if (x === null) ···
if (x === undefined) ···

Does x have a value?

if (x !== undefined && x !== null) {
  // ···
}
if (x) { // truthy?
  // x is neither: undefined, null, false, 0, NaN, ''
}

Is x either undefined or null?

if (x === undefined || x === null) {
  // ···
}
if (!x) { // falsy?
  // x is: undefined, null, false, 0, NaN, ''
}

Truthy means “is true if coerced to boolean”. Falsy means “is false if coerced to boolean”. Both concepts are explained properly in the chapter on booleans).

12.4. undefined and null don’t have properties

undefined and null are the two only JavaScript values where you get an exception if you try to read a property. To explore this phenomenon, let’s use the following function, which reads (“gets”) property .foo and returns the result.

function getFoo(x) {
  return x.foo;
}

If we apply getFoo() to various value, we can see that it only fails for undefined and null:

> getFoo(undefined)
TypeError: Cannot read property 'foo' of undefined
> getFoo(null)
TypeError: Cannot read property 'foo' of null

> getFoo(true)
undefined
> getFoo({})
undefined

  Quiz

See quiz app.