Null and Undefined in JavaScript — Understanding Different Data Types

Have you struggled to understand what “null” and “undefined” data types mean in JavaScript? Perhaps you even took the time to look up the definition in the MDN JavaScript documentation, only to end up more confused. Learning to understand documentation is a necessary step to becoming a proficient web developer, but there is often a steep learning curve before the docs begin to make sense. Part of the problem is that documentation is written by experts, and you need a certain level of proficiency to understand the explanations. In this article, I will attempt to break down the documentation for “null” and “undefined” in JavaScript and explain exactly what they mean in plain English.

Understanding the Null Data Type

Here is the explanation for “null” from the Mozilla developer network:

To break down what this means, we’ll start with the first two sentences: “The value null represents the intentional absence of any object value. It is one of JavaScript’s primitive values.” These two sentences tell us most of what we need to know about null, so let’s break it down a little further, starting with the second sentence.

What Is a Primitive Value?

A primitive value in JavaScript is immutable, meaning the value cannot be changed. There are six such data types in JavaScript. In this article, we only concern ourselves with “null” and “undefined”. So that is the first thing to learn about “null”: it is a value in JavaScript that cannot be changed.

If we circle back to the first sentence from the docs, it tells us “The value null represents the intentional absence of any object value”. (Do not feel badly if you’re not sure what this means. I struggled with this concept until I encountered it in one of my math courses, nearly two years after I first read about “null” and “undefined”.) This tells us that “null” is an object with no properties. In other words, “null” is an object that is empty, a JavaScript object with nothing in it.

Example of a Null Data Type in JavaScript

I will show you what this means by typing a few lines of code into my JavaScript console. If you’d like to follow along, activate your JavaScript console by holding down the control key and clicking anywhere on your screen if you are using a Mac. From the menu that pops up, select “Inspect”, and then select “Console”. If you are on a PC, follow the same directions, except you will right click instead of holding down your control key. The rest of the instructions are the same. And if you can’t open your JavaScript console, do not worry. I will go over everything you need to know here.

In JavaScript, objects are a prototype for things in real life, such as people, dogs, houses, cars, etc. Objects have properties which define their features. If we are talking about a dog as an object, that dog will have a name, breed, eye color and other defining features. The properties describe the dog object. I could, in theory, create many such dog objects that all have different names, breeds, weights, etc.

So, what does it mean when an object is null? It means that the object is empty and has no properties in it.

From the image below, you can see how I used my console to create a dog object with three properties: name: “Rufus”, age: 5, and breed: “Black Lab”. The properties are name, age, and breed, and “Rufus”, 5 and “Black Lab” are the values of those properties. I then deleted those three properties from the object, leaving an empty object. I confirmed that the object was empty by typing dog. The console then returned a set of empty curly braces {} showing that the object was empty.

A Concrete Example of a Null Data Type

To reiterate, a null data type is an empty JavaScript object that has no properties. The curly braces with nothing in them tell us that it is an empty set. If this seems abstract, we can break it down a bit further with a more relatable example. Say, for instance, that you own a zoo with polar bears, lions, and iguanas. In this case, your zoo is the object, and your animals are the things in that zoo. Because you have such an odd little zoo, the corporate office decides that your zoo must close. You are instructed to empty your zoo of all your animals, so you make arrangements to have the polar bears, lions and iguanas transferred to another zoo. Once your zoo is empty of animals, we can say that your zoo is null. It is empty like the dog object above is empty of its defining properties name, breed and age. An object with no properties is a null data type.

Understanding the Undefined Data Type

The undefined data type is not as complicated as the null data type. An undefined data type is a variable that is declared using either var or let that is not yet assigned to a value. Let’s say I declare a variable cat by typing:

let cat;

I can then type “typeof cat” to see what I have. The console tells me that I have an undefined data type. I declared my variable cat, but I didn’t assign it to a value. Let’s say now that I assign the variable cat to the string “Tanner” (my cat’s name). I can type “typeof cat” to see what I have now, and the console tells me I now have a string.

I hope this post helps to illustrate the concepts of null and undefined data types in JavaScript. Now that you’ve read this explanation, take another look at the MDN JavaScript documentation for null and undefined data types and see if it makes a little more sense. If you need further help in understanding these concepts, please feel free to contact me, and I’ll be glad to do what I can to help.