Borislav Hadzhiev
Fri Feb 25 2022·3 min read
Photo by Ruthie Martin
To check for null
or undefined
, compare the value to both null
and
undefined
, e.g. if (name === undefined || name === null) {}
. If either of
the two conditions is met, the variable stores a null
or undefined
value and
the if
block will run.
type Name = null | undefined | string; let name: Name; // ✅ check if undefined or null if (name === undefined || name === null) { console.log('✅ variable is undefined or null'); } else { console.log('✅ variable is NOT undefined or null'); } // ✅ check if NOT undefined or null if (name !== undefined && name !== null) { console.log('✅ variable is not undefined or null'); }
In our first if
statement, we check if the name
variable stores an
undefined
or null
value.
The second example shows how to check if the variable is NOT undefined
or
null
.
You might also see a shorter version of the comparisons above:
type Name = null | undefined | string; let name: Name; // ✅ check if undefined or null if (name == null) { console.log('✅ variable is undefined or null'); } else { console.log('✅ variable is NOT undefined or null'); } // ✅ check if NOT undefined or null if (name != null) { console.log('✅ variable is not undefined or null'); }
Note that we used loose equals ==
instead of strict equals ===
.
When using loose equals to compare to null
, you compare to both null
and
undefined
.
// 👇️ true (loose equals) console.log(null == undefined);
The if
statements above serve as a
type guard in
TypeScript.
type Name = null | undefined | string; let name: Name; if (name !== null && name !== undefined) { // 👇️ let name: string console.log(name); console.log(name.toLowerCase()); }
The Name
type can be null
, undefined
or a string
.
In the if
statement, we check if the variable is not null
and is not
undefined
.
If both conditions are met, TypeScript knows that the variable is a string
and
allows us to use string-specific methods like toLowerCase()
.
If we try to call the toLowerCase()
method directly, without checking if the
variable is not null
and undefined
, we'd get an error.
type Name = null | undefined | string; let name: Name; // ⛔️ Object is possibly 'null' or 'undefined'. console.log(name.toLowerCase());
You could also use a type guard to check if the variable is a string
, which
would be the more direct approach in this scenario.
type Name = null | undefined | string; let name: Name; if (typeof name === 'string') { // ✅ TypeScript knows `name` is string console.log(name.toLowerCase()); }
A newer way to check if a variable is null
or undefined
is to use the
optional chaining (?.) operator.
type Name = null | undefined | string; let name: Name; console.log(name?.toLowerCase());
The
optional chaining (?.)
operator short-circuits instead of throwing an error if the reference is equal
to null
or undefined
.
This is why TypeScript allows us to check if the toLowerCase()
method exists
on the name
variable, even though it could be null
or undefined
.
You could also use this approach to check if a deeply nested property exists on an object.
type Person = { address?: { country?: string; }; }; const obj: Person = {}; console.log(obj?.address?.country?.toLowerCase());
If the reference is equal to null
or undefined
, the optional chaining
operator will short-circuit and return undefined
and no error is thrown.