Undefined vs. Null

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.