null and undefined in javascript
|

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:

mdn explanation for null in javascriptTo 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.

javascript console with a null data type

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.

javascript console with undefined data type

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.

Similar Posts

4 Comments

  1. Hello there! I really wanted to learn on how to code and how to use javascript. It’s my dream to learn it because I know that it’s a challenging thing to do. I read your article and I found it very informative and helpful but to be honest I have no idea how this javascript works. Is there any programs or guide that will help me with javascript from the start? I really appreciate your response.

    1. Thanks for your comment, John! I’m glad you found the article useful. Yes, there are a couple of resources I can recommend. If you’re looking for a free resource and just want to try using JavaScript through tutorials, you can check out W3Schools section on [removed] https://www.w3schools.com/js/d

      If you’re ready to purchase a book or two, you can try Tony de Araujo’s JavaScript in Plain Language. It was really helpful to me when I was starting out: https://www.amazon.com/JavaScr

      Best wishes, John. Please feel free to contact me if there’s anything I can do to help you along.

  2. Incredible! I think it’s one of the clearest explanations I’ve read about this. I like that you break it down slowly.
    I start learning how to code now. There are a lot of weird things I can’t understand very well so I’d like to read more articles like this.
    Thanks a lot!

Leave a Reply

Your email address will not be published. Required fields are marked *