How to check property is null or undefined in Angular

In this article, we will see how to check for both null and undefined in Angular/Typescript, Whenever we are using any typescript class or interface we define some properties there and we often need to check whether that property is null or undefined to prevent some run time error.

Now we will see how many ways are there to check if property is null or undefined in typescript or Angular.

There are following 3 ways to check if property is null or undefined in typescript or Angular.

By using if condition
Use type guard to check if property is null or undefined.
Optional Chaining Operator (?.) in TypeScript
Use null coalescing operator

Table of Contents

1. By using if condition

We can simply check if property is null or undefined by using if condition.

when we pass null, undefined, NaN, 0, “”, false to the if condition, it will consider it as falsy values and will execute else block.

so we can check it like as shown below

if (name === null || name === undefined ) {}

When you declare any variable without any value, by default it is declare it as undefined.

Example 1: Check if property is null or undefined

var title;
if (title === null || title === undefined ) {
      console.log("title is null or undefined");
}
else{
      console.log("title has value");
}

As shown in above code, you can check if variable is null or undefined.

Example 2: Check if property is null

var title;
if (title === null) {
      console.log("title is null");
}
else{
      console.log("title has value");
}

You can also use below code to check if property is null

var title;
if (title) {
      console.log("title has a value");
}
else{
      console.log("title don't have a value");
}

But in the above code, you need to be careful, because like I said earlier if we pass null, undefined, NaN, 0, “”, false to the if condition, it will consider it as falsy values and will execute else block.
so here in above code title is undefined. so it will goes into else block.

Example3: Check if property is undefined.

var title;
if (title === undefined) {
      console.log("title is undefined");
}
else{
      console.log("title has value");
}

Example 4: check if property is not undefined or null

var title;
if (title !== undefined && title !== null) {
      console.log("title is not undefined and null");
}
else {
     console.log("title is undefined or null");
}

Example 5: Check if property is not null

var title;
if (title != null) {
      console.log("title is not null");
}
else{
      console.log("title is null");
}

Example 6: Check if property is not undefined

var title;
if (title != undefined) {
      console.log("title is not undefined");
}
else{
      console.log("title is undefined");
}

2. Use type guard to check if property is null or undefined.

when we use any string method on string variable. for i.e if we call toUpperCase() method without checking value then it is possible that it might throw an error if value is null or undefined so we can check the type by following code.

let title :  null | undefined | string;
if (typeof title === 'string') {
        console.log(name.toUpperCase());
}

3. Optional Chaining Operator (?.) in TypeScript

Optional Chaining Operator is new way to check.

At its core, optional chaining lets us write code where TypeScript can immediately stop running some expressions if we run into a null or undefined.

The star of the show in optional chaining is the new ?. operator for optional property accesses. When we write code like

let x = name?.toUpperCase();

what it will do if it will check if name is defined and if it is then it will call toUpperCase() method and when it is not defined then it will return undefined.

4. Use null coalescing operator

we can also use null coalescing operator to check null or undefined and can fallback to default values.

and we can also use null coalescing operator with optional Chaining Operator. we will see an example of it.

Let’s say we have student object like following:

let student= {
      id:100,
      name: "Martin",
      email: null,
      address: {
          streetAddress:"SG Highway"
          city:"Ahmedabad",
          country:"India"
      }
};

now if we want to check if email is null or undefined then we can use following code using if condition.

let studentEmail;
if(student.email){
  studentEmail= student.email;
}
else{
  studentEmail= "No Email Found";
}
console.log(studentEmail);

We can refactored above code into single line like shown in below code

var studentEmail= student.email?? "No Email Found";

We can also check if student is null or not using the following code. Here were are using both null coalescing operator with optional Chaining Operator.

var studentEmail= student?.email?? "No Email Found";

I hope you like this article.