TypeScript has two special values for Null and Undefined. Both represent no value or absence of any value. The difference between Null & Undefined is subtle and confusing. Prior to TypeScript 2.0, we could assign them all other types like numbers, strings, etc. Such assignment has been the source of a lot of errors likeTypeErrors or ReferenceErrors in JavaScript. The StrictNullChecks introduced in version 2.0 raises compile-time errors if we use Null or Undefined. In this tutorial, we compare Null and Undefined. let us learn the similarities and differences etc.
Table of Contents
Undefined & Null
The value undefined means value is not assigned & you don’t know its value. It is an unintentional absence of value. It means that a variable has been declared but has not yet been assigned a value.
The value null indicates that you know that the field does not have a value. It is an intentional absence of value.
Undefined is the default value for uninitialized variables
Whenever we declare a variable without initializing it with a value, TypeScript initializes it as undefined. But TypeScript never assigns null to any variable. We have to assign Null to variable to make it null.
The following example declares the variable foo. We have not given it any initial value. By default, it gets the value undefined. But for null, we need to assign a value to it
1 2 3 4 5 6 7 8 | let foo:any; console.log(foo); //undefined foo=null //Setting its value to null console.log(foo); //null |
The following are some of the instances where a variable gets the value undefined
- Uninitialized variable
- Optional function argument that has not been supplied
- Non-existing object Property
- Non-existing array elements
Note that in the example above foo is of type any, which means that no type checking. But if we assigned a type like say number, then we will see compiler throwing errors like 'foo' is used before being assigned or Type 'null' is not assignable to type 'number' deepening on whether you have enabled strictNullChecks or not.
1 2 3 4 5 6 7 8 | let foo:number; console.log(foo); //Variable 'foo' is used before being assigned foo=null //Type 'null' is not assignable to type 'number'. console.log(foo); |
Data Types
The Undefined & null also have corresponding types named after them. The Data Type of undefined is undefined and that of null is null.
We can create a variable of type undefined or null by annotating them with type just like any other variable declaration
1 2 3 4 5 6 7 | let a:undefined //a is a variable of type undefined let b:null=null //b is a variable of type null console.log(typeof(a)) //undefined console.log(typeof(b)) //object |
But using typeof on a null variable shows it as an object. This is a very old bug in JavaScript
Setting the value
The only value that you can assign to an undefined variable is undefined. You can assign null only if StrictNullCheck is disabled). Any other values like string, object, numbers, etc are not allowed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let uVar: undefined; //Allowed uVar=undefined; //ok //Allowed if StrictNullCheck is Disabled Else not allowed uVar=null; //Type 'null' is not assignable to type 'undefined' //Not Allowed uVar=10; //type '10' is not assignable to type 'undefined' uVar={} //Type '{}' is not assignable to type 'undefined' |
The only value that you can assign to it is null. You can also assign undefined only if StrictNullCheck is disabled.
1 2 3 4 5 6 7 8 9 10 11 12 13 | let nVar: null; //Allowed nVar=null; //ok //Allowed if StrictNullCheck is Disabled else not allowed nVar=undefined; //Type 'null' is not assignable to type 'null'. //Not Allowed nVar=10; //type '10' is not assignable to type 'null' nVar={} //Type '{}' is not assignable to type 'null' |
Falsy
Both null & undefined is falsy value in TypeScript. i.e. when we use them in a boolean expression they are coerced to false.
1 2 3 4 5 6 7 | let a=undefined let b=null if (!a) console.log('false') //false if (!b) console.log('false') //false |
But they are neither false nor true.
1 2 3 4 5 6 7 8 9 10 | let a=undefined let b=null if (a==false) console.log('false') if (a==true) console.log('true') if (b==false) console.log('false') if (b==true) console.log('true') |
1 2 3 4 5 6 7 8 9 | console.log(true && null) //null console.log(true || null) //true console.log(true && undefined) //undefined console.log(true || undefined) //true |
Checking for Null & Undefined
You can use typeof operator to check for undefined but not null as it returns “object”. You can use the == & === operator to check their values
1 2 3 4 5 6 7 8 9 10 | let nVar:any; console.log(nVar) //undefined console.log(typeof nVar) //undefined console.log(nVar==undefined) //true console.log(nVar===undefined) //true |
Checking for null.
1 2 3 4 5 6 7 8 9 10 11 | let nVar:any; nVar=null; console.log(nVar) //null console.log(typeof nVar) //object //Do not use typeof for null console.log(nVar==null) //true console.log(nVar===null) //true |
Comparing Null with undefined
Comparing null with undefined results in different results depending on whether you use an equality checker (==) or strict equality checker (===)
null and undefined both represents no value hence equality checker (==) returns true. This is because the equality checker does not check for data type
1 2 3 | console.log(null == undefined) //true |
But strict equality checker returns false because it also checks for the data type.
1 2 3 | console.log(null === undefined) //false |
Arithmetic Operations
Converting undefined to Number will result in NaN.
1 2 3 4 5 | let b=undefined console.log(Number(b)) //NaN |
While null is coerced to 0
1 2 3 4 5 | let b=null console.log(Number(b)) //0 |
Compiler throws an error if we use undefined in arithmetic operations. The error depends on whether the strictNullChecks is enabled or not.
1 2 3 4 5 6 7 8 9 10 | let a=10; //Type of a is number let b:any=undefined //Type of b is undefined //strictNullChecks==true console.log(a+b) //object is possibly 'undefined' //strictNullChecks==false console.log(a+b) //Operator '+' cannot be applied to types 'number' and 'undefined' |
You can opt out of Type Checking by declaring the variable as any. Then the undefined is coerced to NaN and the result will be NaN.
1 2 3 4 5 6 7 | let a=10; //Type of a is number let b:any=undefined //Type of b is any. No Type Check if Performed console.log(a+b) //NaN |
Similarly, using null in arithmetic operations results in compiler errors.
1 2 3 4 5 6 7 8 9 10 11 | let a=10 // a is of type number let b=null // b is of Type Null //strictNullChecks==true console.log(a+b) //object is possibly 'null' //strictNullChecks==false console.log(a+b) //Operator '+' cannot be applied to types 'number' and 'null'. |
But if you opt-out of type checking then the null is coerced to 0.
1 2 3 4 5 6 7 | let a=10 // a is of type number let b:any=null // b is of Type Null console.log(a+b) //10 |
TypeOf
The Typeof Operator returns the data type of the variable. It returns the data type of undefined correctly but returns “object” as the data type of null. This is a well-known bug in JavaScript
1 2 3 4 5 6 7 | let a:undefined let b=null console.log(typeof(a)) //undefined console.log(typeof(b)) //object |
Summary
| 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. |
| The typeof null is an object. (and not type null) | Typeof undefined is undefined type |
| 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. |
References
Read More
There is no example that shows the actual use, when to use null when undefined, show examples not just plain text.