Understanding data types: null vs undefined
These notes are taken from Beginner JavaScript by Wes Bos. Go buy it!
There are two ways to express nothing in JavaScript; null
and undefined
. But how do they differ?
Understanding undefined #
If we create a variable but don’t set anything to it, the value returned will be undefined
.
let dog;
console.log(dog);
undefined
is something that has been created, like a variable, but does not yet have a value set to it. In other words, it is not yet defined.
The browser sets this missing value to undefined
because no value exists and so there is nothing to return.
If we then give the variable a value:
dog = "snickers";
The browser will return the new value:
dog;
("snickers");
And the value is no longer undefined
.
Understanding null #
null
is a value of nothing that has to be explicitly set before it can be returned as null
.
const somethingNull = null;
In this case the value is null
, unlike our example above which is undefined
because it literally has no value.
let somethingUndefined;
This example returned undefined
as we have yet to give it a value.
A practical example #
We can use the example of a mononymous person (someone known by a single name). In this case we’ll use the singer Cher, who we know only as Cher.
const cher = {
first: "cher"
};
We don’t know Cher’s last name so .last
will return undefined
.
cher.last;
undefined;
Now on to our example of null
.
The comedian and illusionist Teller, the silent half of the duo Penn & Teller, legally changed his original polynym, Raymond Joseph Teller, to the mononym “Teller” and possesses a United States passport issued in that single name.
In JavaScript we can represent his original name like this:
const teller = {
first: "Raymond",
last: "Teller"
};
To represent his legally changed polynym we might update the value of last
to null
.
teller.first = "Teller";
teller.last = null;
That’s it.