Null Vs Undefined in TypeScript

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.

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

The following are some of the instances where a variable gets the value undefined

  1. Uninitialized variable
  2. Optional function argument that has not been supplied
  3. Non-existing object Property
  4. 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.

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

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.

The only value that you can assign to it is null.  You can also assign undefined only if StrictNullCheck is disabled.

Falsy

Both null & undefined is falsy value in TypeScript. i.e. when we use them in a boolean expression they are coerced to false.

But they are neither false nor 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

Checking for null.

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

But strict equality checker returns false because it also checks for the data type.

Arithmetic Operations

Converting undefined to Number will result in NaN.

While null is coerced to 0

Compiler throws an error if we use undefined in arithmetic operations. The error depends on whether the strictNullChecks is enabled or not.

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.

Similarly, using null in arithmetic operations results in compiler errors.

But if you opt-out of type checking then the null is coerced to 0.

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

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 variableThe 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 nullYou can Undefine a variable by setting it to Undefined
null is always falsyundefined 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 zerowhen 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.

Leave a Comment

Your email address will not be published.

Scroll to Top