Undefined vs. Null
Tags: javascript, typescript
Published: 2021-08-06 09:22:04

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.