Undefined is a special value and also a data type in TypeScript. TypeScript also has a global variable with the name undefined which has the value Undefined. Undefined is a primitive value and is treated as falsy for boolean operations. This tutorial let us learn how to use undefined in TypeScript.
Table of Contents
Undefined as Value
Undefined is a primitive value that indicates that the value is not assigned. i.e. whenever we do not explicitly assign a value to a variable, TypeScript assigns the undefined value to it. It is an unintentional absence of any value.
Undefined is different from the value null. The null value means we know that it does not have any value. The value undefined means we do not know its value.
The ECMA specifications define undefined as “the primitive value used when a variable has not been assigned a value”.
TypeScript explicitly sets the value undefined when we do not provide any value.
The following are some of the cases where variable gets the value undefined
Uninitialized variable
Every TypeScript variable that we create without assigning any value gets the value of undefined.
The following example declares the variable num of type number. 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 |
Optional Function argument
Typescript does not allow us to omit a function argument unless we explicitly declare it by adding ? in the parameter declaration. When we do not pass a value to an optional parameter, the TypeScript sets its value as undefined.
In the following example we have declared parameter x as optional by adding ? after x. When we invoke the function without passing any value to x Typescript initializes it with undefined.
1 2 3 4 5 6 7 | function foo(x?:string) { console.log(x) //undefined } foo(); |
If we set the type of non-optional parameter as undefined and pass nothing, the TypeScript compiler will throw an error.
1 2 3 4 5 6 7 | function foo(x: undefined) { console.log(x) //undefined } foo(); // An argument for 'x' was not provided. |
Non-existing array elements
Non-existing array elements return undefined. In the following example, the cars array does not have an element at 5. Hence it returns undefined.
1 2 3 4 5 | const cars: string[] = ["Saab", "Volvo", "BMW"]; console.log(cars[5]) //undefined |
Void operator
The void operator always returns undefined irrespective of the expression provided to it.
For Example, all of the following returns are undefined.
1 2 3 4 5 6 | void (100) //undefined void (true) //undefined void {firstName: 'Bill'} //undefined void ("Hello") //undefined |
Explicitly set to undefined
We can also explicitly set the variable to undefined.
1 2 3 | let myVar= undefined; |
Assigning undefined is not recommended unless you have a good reason to do so. undefined means that the value is not assigned. If you know the variable does not have any value then use null.
Undefined Type
The undefined is also a type. Hence we can create a variable of type undefined
1 2 3 4 5 6 | let num:undefined; //num variable is of type undefined console.log(num); //undefined console.log(typeof (num)) //undefined |
Until Typescript 1.8 the undefined was considered a valid value and assignable to all other data types. But since the introduction of strictNullChecks in TypeScript 2.0, undefined is assignable only to any & void if strictNullChecks is enabled. If disabled, then you can assign undefined to all other data types
Nothing is assignable to undefined except never & any. You can assign null to undefined only if you disable strictNullChecks.
You can disable or enable strictNullChecks in tsconfig.json.
Global Undefined variable
The TypeScript has a global variable with the name undefined. The initial value of the global undefined is the value undefined.
Undefined is the property of the global object. Hence you can access it using the window object (only in the browser) or using the globalThis property.
1 2 3 4 5 6 7 8 9 10 11 | console.log(undefined) //undefined console.log(typeof(undefined)) //undefined //Works only in browser console.log(window.undefined) //undefined console.log(typeof(window.undefined)) //undefined console.log(globalThis.undefined) //undefined console.log(typeof(globalThis.undefined)) //undefined |
Since the ES5 version, the undefined is a non-configurable, non-writable & non-enumerable property. But that does not stop someone from overriding it inside a function.
1 2 3 4 5 6 7 8 9 10 | abc() function abc() { var undefined=10 console.log(undefined) //10 console.log(typeof(undefined)) //number } |
Hence take care not to override it.
Checking for undefined
There are two ways you can check if the value is undefined.
One method is to compare the value against the value of global undefined property
1 2 3 4 | let a:undefined; console.log(a===undefined) //true |
Another way is to use the typeof operator, which returns the data type as a string.
1 2 3 4 5 | let a:undefined console.log(typeof(a)==="undefined") //true |
Note that undefined is true does not mean that the property or variable exists. To check whether the property exists use the hasOwnProperty or use the 'prop' in obj syntax.
Null & Undefined
Comparing undefined to null using loose equality checker (==) return true. This is because loose equality checker (==) coerces the value of undefined to no value. Hence the result is true.
1 2 3 4 | let a:undefined console.log(a==null) //true because both null & undefined is treated as no value |
But using the strict equality checker (===) returns false because the data type of null is different from the data type of undefined.
1 2 3 4 5 | let a:undefined console.log(a===null) //false. Because types are different |
Boolean value of undefined
The boolean value of undefined is considered as falsy. i.e. TypeScript implicitly converts the value undefined to false before using it in an expression involving Booleans
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | let a:undefined if (a) { console.log("true") //this code does not execute } if (!a) { console.log("false") //false } ***** false |
But this does not mean that undefined is false. Undefined means we do not know its value. Hence comparing undefined either with false or true always result in false
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let a:undefined //loose equality check console.log(a==false) //false console.log(a==true) //false //Strict equality check console.log(a===false) //false console.log(a===true) //false |
Arithmetic Expression & undefined
In arithmetic expressions, the undefined is coerced to NaN.
1 2 3 4 5 6 7 8 | let a=10 let b console.log(a+b) //NaN console.log(Number(b)) //NaN |
References
Read More
