Why JavaScript’s undefined Isn’t What You Think It Is

by Christoph Schiessl on JavaScript

All syntax highlighters I've ever worked with treat JavaScript's undefined as a keyword. However, that's a misconception.

// global scope
undefined = 123;   // assign to `undefined`
undefined === 123; // ==> evaluates to true

The code snippet above looks strange, but it's valid JavaScript. Pygments, the highlighter I'm using for this website, is misleading because it considers undefined a keyword. But in reality, there's nothing special about undefined:

I'm assuming you are using a more or less recent browser to read this article. If so, you, unfortunately, can't reproduce the above behavior because your browser implements the ECMAScript 5 (short: ES5) standard. ES5 introduces many changes, but one is particularly important in this context — namely, they updated the undefined property to be non-writeable.

In a nutshell, this means that the last line of the above snippet evaluates to...

The non-writeable undefined in ES5 (or newer) mitigates the problem, but it's still easy to construct a situation where undefined is not what you expect. All it takes is a function scope and a var ...

(function () {
  // Remember: `undefined` is an identifier (not a keyword)
  var undefined = 'foobar';

  // Clearly, 'foobar' is defined (its type is 'string')
  if ('foobar' === undefined) {
    console.log('foobar is *UN*defined!!!');
  } else {
    console.log('foobar is defined!!!');
// Output: foobar is *UN*defined!!!

Let me conclude by pointing out that it is your responsibility as a JavaScript developer to ensure that undefined really refers to the value its name suggests. You are responsible for ensuring that typeof undefined === 'undefined' is always true.

Thank you for reading, and see you soon!

Ready to Learn More Web Development?

Join my Mailing List to receive two articles per week.

I send two weekly emails on building performant and resilient Web Applications with Python, JavaScript and PostgreSQL. No spam. Unscubscribe at any time.

Continue Reading?

Here are a few more Articles for you ...

The Built-in all() Function

Learn how to use the built-in all() function in Python for boolean logic, with examples and different implementations.

By Christoph Schiessl on Python

The Built-in chr() and ord() Functions

Discover Python's built-in functions chr() and ord() for handling Unicode characters and converting between integers and characters.

By Christoph Schiessl on Python

Telling Docker Who You Are

Learn how to avoid permission issues when creating files on a Docker bind-mount volume from within a container and manage user IDs and group IDs on Linux.

By Christoph Schiessl on DevOps and Docker

Christoph Schiessl

Christoph Schiessl

Independent Consultant + Full Stack Developer

If you hire me, you can rely on more than a decade of experience, which I have collected working on web applications for many clients across multiple industries. My involvement usually focuses on hands-on development work using various technologies like Python, JavaScript, PostgreSQL, or whichever technology we determine to be the best tool for the job. Furthermore, you can also depend on me in an advisory capacity to make educated technological choices for your backend and frontend teams. Lastly, I can help you transition to or improve your agile development processes.