While developing some awesome applictions you might have come across types or values like null
and undefined
. The documentation for these types and values can be sometimes pretty confusing. So I am going to try to explain it for you in a practical way, so you can use them wherever you need while also understanding what they do. I will also try to give you examples where you can or have to use them.
Let's get started!
Null and Undefined: Empty Values
Null and undefined are values that belong to the type of empty values. Empty value means the absence of a real value like boolean, number or string.
The main difference between those two are, that in the life cycle of a JavaScript application you would never receive null
, unless someone has explicitly put it there. On the other hand, undefined
is something that can be produced by JavaScript itself.
Let's consider a simple example:
const me = {
name: "Web Dev Ken",
age: "Old enough",
};
console.log(me.email);
// undefined
In the example above, I have an object with name
and age
. If I try to access the property email
, I receive undefined because that property doest not exist.
Let's see an example where null
comes into the party.
function getObjectProperty(property) {
const value = me[property];
if (value) {
return value;
} else {
return null;
}
}
Above I have a simple function that receives an object key as an argument and tries to access that property from the object me
. In the if-statement I check if the value is available and return it accordingly. If the value does not exist, I explicitly return null
. Here we can see that there is no way that JavaScript somehow returns null
by itself. It's something I have put there to fullful a purpose.
Let's consider a more advanced example with TypeScript:
type MeType = {
name: string;
age: string;
email: string | null;
};
type OtherMeType = {
name: string;
age: string;
email?: string;
};
Above I introduce you two very similar types. MeType
has name
, age
and email
and OtherMeType
has the same properties. The difference is with the property email
, that explicitly can be null
with MeType
but that is optional with OtherMyType
.
const meType: MeType = {
name: "Web Dev Ken",
age: "Old Enough",
email: null
};
const otherMeType: OtherMeType = {
name: "Web Dev Ken",
age: "Old Enough"
};
In the code example above I create to objects, one of type MeType
and the other of type OtherMeType
. In the case of MeType
I necessarily have to set the property email
where in the case of OtherMeType
I don't. Once we log the property email
, we will see what this leads to.
console.log(meType.email);
// null
console.log(otherMeType.email);
// undefined
Above you can see the result of logging the property email
from both types as a practical example. With meType.email
we gave our object a possibility to be either a string
or null
. While on otherMeType.email
we actually don't know if there is a value or if it results to undefined
.
As you can see in the examples above, null
is something we as developers can introduce and that is not produced by the JavaScrpt mechanism itself. This can be very powerful especially in TypeScript, if you want strict type safety and not deal with undefined
, you can create your types by explicitly setting null
where you have an absence of a value. Afterwards you can strictly check for null
in your code like me.email === null
and create robust and predictable code.
Top comments (0)