TypeScript has two special values for Null and Undefined. We can assign them to all other types like number, string, etc. Such assignment has been the source of a lot of errors likeTypeErrors or ReferenceErrors in JavaScript. Since the TypeScript Version 2.0. we can make use of strictNullChecks: true in the tsconfig.json, which ensures that the compiler to raise an error if we assign Null and Undefined to other types. In this tutorial, we learn more about Null and Undefined. Their similarities and differences. How to check for null & Undefined etc.
Table of Contents
Undefined & null as a value
Undefined
The Undefined means a variable has been declared but has not yet been assigned a value. The undefined variables do not have any value. It is an unintentional absence of any value. Whenever we declare a variable without initializing it with a value, TypeScript initializes it as undefined.
The following example declares the variable num. We have not given it any initial value. By default it gets the value undefined.
1 2 3 4 | let num:number; console.log(num); //undefined |
We can also assign undefined value variables of any other types (except never)
1 2 3 4 5 6 7 | let num:number; num=10; console.log(num); //10 num=undefined console.log(num); //undefined |
Null
Null means an empty or non-existent value. The absence of value here is intentional. The TypeScript does not automatically make a variable null. We have to assign Null to variable to make it null
When we declare a variable without initialing, it gets the value undefined. To make a variable null, we need to assign it as shown in the example below.
1 2 3 4 5 6 | let num:number; console.log(num); //undefined num=null console.log(num); //null |
We can also assign nullto an variable of any type (except never)
Undefined & null as a Type
The Undefined & null also has corresponding types named after them.
Undefined
We can create a variable as undefined just like any other variable declaration. The only values that you can assign to them are undefined and null. Any other values like string, object, numbers, etc are not allowed.
1 2 3 4 5 6 7 8 9 10 11 12 | let uVar: undefined; //Allowed uVar=undefined; uVar=null; //Not Allowed uVar=10; //type '10' is not assignable to type 'undefined' uVar={} //Type '{}' is not assignable to type 'undefined' |
1 2 3 4 5 6 7 8 9 | let num:number; console.log(num); //undefined console.log(typeof num); //undefined let uVar: undefined; console.log(uVar); //undefined console.log(typeof uVar); //undefined |
Also the typeof returns the type as undefined.
Null
Similarly, you can create a variable as null. Defining a variable as of type null does not give it a value of null, but it gets the default value of undefined. (Like all other TypeScript variables). We must assign the value null to it.
1 2 3 4 5 6 7 | let nVar: null; console.log(nVar) //undefined nVar=null; console.log(nVar) //null |
The only values that you can assign to it is undefined & null.
1 2 3 4 5 6 7 8 9 10 11 12 | let nVar: null; //Allowed nVar=undefined; nVar=null; //Not Allowed nVar=10; //type '10' is not assignable to type 'null' nVar={} //Type '{}' is not assignable to type 'null' |
The typeof returns the type as object and not as null. This is a bug in JavaScript.
1 2 3 4 5 6 7 8 9 10 11 | let num:number; num=null //Assigning null to a number variable console.log(num); //null console.log(typeof num); //object let nVar: null; nVar=null //Assigning null to a null variable console.log(nVar); //null console.log(typeof nVar); //object |
Strict null checks
We can assign Null and Undefined to all other types as shown below. This has been the source of TypeErrors or ReferenceErrors in JavaScript. These errors usually occur at runtime crashing the applications.
1 2 3 4 5 6 7 8 9 10 11 | let strVar: string; strVar= "Rahul"; //ok strVar= null; //ok strVar= undefined; //ok let numVar: number; numVar= 24; //ok numVar= null; //ok numVar= undefined; //ok |
The typescript since version 2.0 has the option for Strict null checks which results in compiler errors when we try to assign a null or undefined to any other type.
To enable the strictNullChecks open the tsconfig.json and add the following line under the compilerOptions.
1 2 3 4 5 6 7 8 | { "compilerOptions": { "strictNullChecks": true }, } |
Now, with strictNullChecks is true, the compiler raises the error when you assign undefined or null to any variables except any. Even assigning undefined to a null variable or vice versa also results in a compile-time error.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | let strVar: string; strVar= "Rahul"; //ok strVar= undefined; //Type 'undefined' is not assignable to type 'string' strVar= null; //ype 'null' is not assignable to type 'string' let numVar: number; numVar= 24; //ok numVar= undefined; //Type 'undefined' is not assignable to type 'number' numVar= null; //Type 'null' is not assignable to type 'number' let anyVar:any anyVar= 24; //ok anyVar= undefined; //ok anyVar= null; //ok let nullVar:null nullVar= undefined; //type 'undefined' is not assignable to type 'null' nullVar= null; //ok let unVar:undefined unVar= undefined; //ok unVar= null; //Type 'null' is not assignable to type 'undefined'. |
Non Nullable Types
Now, with strictNullChecks you cannot assign null or undefined to variables other types.
To make a variable nullable, we need to explicitly specify it. We can make use of the union type, which allows us to construct type which is a union of two or more types. In the following example, the numVar is a union type containing the number, null & undefined types.
1 2 3 4 5 6 | let numVar: number | null | undefined; numVar= 24; //ok numVar= undefined; //ok numVar= null; //ok |
Difference Between Null & Undefined
Null & Undefined looks similar, but there are few important differences between them. The following tables shows the some of the similarities and differences between them
| Null | Undefined |
|---|---|
| Null is the intentional absence of a value (null is explicit) | Undefined is the unintentional absence of a value (undefined is implicit) |
| Null must be assigned to a variable | The default value of any unassigned variable is undefined. |
| Type of undefined is undefined type | The type of null is an object. (and not type null) |
| You can empty a variable by setting it to null | You can Undefine a variable by setting it to Undefined |
| null is always falsy | undefined is always falsy |
| null is equal to undefined when compared with == (equality check) | |
| null is not equal to undefined when compared with === (strict equality check) | |
| When we convert null to a number it becomes zero | when we convert undefined to number it becomes NaN |
| You can represent undefined as a JSON (JavaScript Object Notation) | null is a valid value in JSON. |
Checking for Undefined
You can check for Undefined using the typeof operator or by using the Equals Operator ( == ) vs Strict Equals Operator ( === ).
1 2 3 4 5 6 7 8 9 10 11 12 | let uVar:number| null | undefined; console.log(uVar) //undefined console.log(typeof uVar) //undefined console.log(uVar==null) //true //== operator returns true for null console.log(uVar===null) //false console.log(uVar==undefined) //true console.log(uVar===undefined) //true |
Checking for Null
You cannot use typeof operator to check for null as it is returns object. Hence you can either use the == or ===
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let nVar:number| null | undefined;; nVar=null; console.log(nVar) //null console.log(typeof nVar) //object console.log(nVar==null) //true console.log(nVar===null) //true console.log(nVar==undefined) //true // ==operator returns true for undefined console.log(nVar===undefined) //false |
Note that the == operator returns true for null==undefined
1 2 3 4 | console.log(null==undefined) //true console.log(null===undefined) //false |
Hence you can use == to check for both undefined and null at the same time. == will correctly rule out both null and undefined with such checks.
Great explanations !!!
Thanks for this clarification. It really helped me…
Much appreciated.