Comparing null and undefined in JavaScript

Let's discuss two important special data types in JavaScript: null and undefined.

They are often confused by beginners, as both seem to relate to nothingness, negativity, or emptiness.

undefined

Let's start with undefined. It is a primitive value in JavaScript, just like Boolean values (true or false) or numbers. It is written as undefined in all lowercase letters. This value represents the absence of a value or an uninitialized value.

When you declare a variable without assigning a value, its default value is undefined. For example:


let username;

In this case, the username variable has not been assigned a value, so its default value is undefined.

You could also explicitly set a variable to undefined:


let username = undefined;

Remember, undefined represents the absence of a value.

A common scenario where you might encounter undefined is when trying to access a non-existent property on an object.

For instance, consider the following object:


const person = {
name: "Joaquin"
};

If you try to access a property that doesn't exist, like person.age, you will get undefined as the result:


person.age // undefined

Understanding Undefined and Null in JavaScript

In JavaScript, there are two primitive values that represent the absence of a value: undefined and null. Let's take a closer look at both.

Undefined

undefined represents the lack or absence of a value. For example, if you have an object with a single property:


let person = {
name: 'Joaquin'
};

If you try to access a property that doesn't exist, like age, you'll get undefined:


console.log(person.age); // undefined

Similarly, if you call a function without providing a value for an argument, the missing argument will be set to undefined.

Here's a simple greet function that expects a name argument:


function greet(name) {
console.log('HELLO, ' + name);
}

If you provide a name, like 'Tony', the function will print 'HELLO, Tony':


greet('Tony'); // HELLO, Tony

However, if you don't provide a name, the function will print 'HELLO, undefined':


greet(); // HELLO, undefined

In this case, undefined is coerced into a string and concatenated with the string 'Hello, '.

Null

Now let's talk about null, which represents the intentional absence of a value.

Unlike undefined, which is automatically assigned in certain cases such as uninitialized variables and missing function arguments, null must be explicitly set by a developer.

We use null to indicate that something has no value deliberately.

Setting a value to null can be a way to communicate with other developers or ourselves that there's no value present.

For example, consider a video chat application where users can select from different video and audio sources.

When a user selects "no camera" or "no microphone," you might represent that choice with null to indicate the intentional absence of a value.


let audioInputDevice = null;

By using null in this way, you make it clear that the absence of a value is intentional and not an oversight.

If the user selects a specific device, like the Blue Yeti microphone, we would then set the audioInputDevice to a non-null value.


audioInputDevice = {name: "Blue Yeti Microphone"}

Comparing null and undefined

When comparing null and undefined, it's important to note their differences.

Comparing with Double Equals

If we use the double equal sign operator (==), null is equal to null, and undefined is equal to undefined.


null == null // true
undefined == undefined // true

Because the double equals == coerces types, we can see that null and undefined are also equal to each other:


null == undefined // true

Comparing with Triple Equals

With triple equals (===), null is only equal to itself, and undefined is only equal to itself.


null === null // true
undefined === undefined // true

In this case, undefined is not equal to null because they are different primitive values.


undefined === null // false

Checking with the typeof Operator

When using the typeof operator on undefined, we get the expected result: the string "undefined".


typeof undefined // "undefined"

However, when using typeof on null, we get a string saying "object".


typeof null // "object"

This is a weird quirk and a bug from the early days of JavaScript that still exists today.

Determining Whether a Value is null

If you're trying to determine whether a value is specifically set to null, your best option is not to use typeof or ==.

You should always compare to null with ===.

For example audioInputDevice === null will only be true if audioInputDevice is actually null.


const audioInputDevice = null;
audioInputDevice === null // true

Conclusion

To wrap things up, undefined and null both represent the lack of a value in JavaScript. Remember that undefined indicates that there's nothing there, while null is a value we use to deliberately indicate the lack of a value.

Transcript

00:00 In this video, we'll talk about two very important special data types in JavaScript, null and undefined, what they are and how they are similar and how they're different. A lot of people mix them up when they're starting out with JavaScript. Both of them sound like they have to do with nothingness, or negativity, or emptiness, or something like that.

00:18 But let's start by talking about undefined. So undefined is a primitive value in JavaScript, just like Boolean values, true or false, or numbers, for example, and it's spelled undefined and all lowercase. It's a value that represents the absence of a value or an uninitialized value.

00:38 So it's the default value for any variables that we declare that do not have a value assigned, like let, I don't know, username. I'm not going to assign it a value. If I don't, its default value is undefined. It is the absence or the lack of a value.

00:58 Now, I could explicitly set something to undefined too. Just so you know, it's still going to be undefined. But the default behavior is when you declare a variable with no value, you don't initialize it, it will be initialized to the value of undefined, which is a true value in JavaScript. Undefined, as I've mentioned, represents the absence of a value.

01:17 A really common place where you'll run into this is if you try and access a non-existent property on an object. So if I have some object like person, and let's just say our person only has a name. Our person's name is Joaquin. So if I try and access a property that doesn't exist like age, I get undefined.

01:37 It's the lack or absence of a value here. Similarly, if I call a function without providing a value for an argument, like this very simple greet function, it expects a name. If I provide a name like, I don't know, Tony, we get Hello Tony. It prints out Hello plus name. But if I don't provide a value for name,

01:56 we'll get undefined. In this case, undefined was coerced into a string and concatenated with the string Hello comma space. So let's talk about null. Null is another primitive value. Just like undefined, it's a true value in JavaScript,

02:14 and it represents the intentional absence of a value. So it's not automatically assigned like undefined has been. In these previous examples, undefined was automatically assigned as a value to a variable that I did not initialize with a value.

02:30 Same thing when we try and access a property that doesn't exist in an object, when I call a function with a missing argument, that missing argument is automatically set to undefined. Null is the explicit and intentional absence of a value. We use this as developers when we want to indicate that something has no value.

02:49 So we set values to null when we're trying to tell other developers or just ourself that there is deliberately no value present. So here's an example of when you might use it. Let's say I'm building a video conferencing application like Zoom or

03:05 Google Hangouts where people can select from different video and audio sources. Anytime I go on Zoom, I usually have my microphone plugged in, which is a Blue Yeti microphone. I also have the MacBook microphone, maybe my headphones that have a microphone. I have to pick which audio input I want, and it often causes problems.

03:23 So if I was building this software, you want to let a user also select no audio and turn it off at some point. So what we could do is have it, this is very simplified, but a variable called audio input device, it might start off set to the MacBook microphone,

03:39 and then they could maybe toggle it and change it to whatever other devices they have. But then if our user decides they want to have no audio whatsoever, you could, I guess, set it to something like false or zero or an empty object. But the better option in a situation like this is to use null,

03:59 which represents the explicit lack of a value. We deliberately set it to this value to tell ourselves, to tell other developers, there's nothing here. There is no audio input device. That is the only purpose of null. It is a value, a primitive value like undefined, that represents the explicit and intentional lack of a value.

04:19 Whereas undefined is more of JavaScript's way of telling us there's nothing here. It's not defined. Null is us, the developer, saying there is definitely no value here, and we deliberately want there to be no value here. Then if a user then toggled in my hypothetical Zoom clone,

04:37 they decided to select the Blue Yeti microphone, we would then set audio input device to have a value that was not null. Now, let's talk a little bit about comparing null and undefined. If we use the double equal sign operator, null is equal to null, and undefined is double equal to undefined.

04:54 Then if I use the double equals between null and undefined, they're also considered equal when we use double equals. But remember, this coerces types. Now, let's talk about triple equals. Null is going to be triple equal to itself. Undefined is triple equals to itself.

05:10 However, undefined is not triple equals to null. They are not the same primitive value. They are different values. Yes, they both represent the lack of something or emptiness, but they're not the same. I have a video on this website dedicated to the type of operator. If we use type of an undefined,

05:30 we get an expected result, we get the string undefined. If I use type of on null, we get something that you may not expect or anticipate. We get a string saying object. This is just a weird quirk. It's basically a bug from the early days of JavaScript that is still here with us today.

05:47 This means if you're trying to determine whether a value is specifically set to null, your best option is not to use type of, it's not to use double equals, but it's to compare it. So I have my audio input device, which I know is null, is to compare it with triple equals to the value of null. This will only be true if audio input device is actually null.

06:07 So to wrap things up, undefined and null both represent the lack of a value. Undefined is JavaScript's way of telling us there's nothing here. We'll get undefined when we pass an empty argument to a function, when we try and access a property that doesn't exist in an object, and if we declare a variable without initializing it,

06:27 it will be set to undefined. Null, on the other hand, is a value we use to deliberately indicate the lack of a value.

More Tips