Set a default value if Null in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 17, 2022

banner

Photo from Unsplash

Set a default value if Null in TypeScript #

Use the nullish coalescing operator (??) to set a default value if null in TypeScript, e.g. const result = role ?? 'developer';. The nullish coalescing operator returns its right-hand side operand when the value to the left is null or undefined.

index.ts
const role: string | null = null; const result1 = role ?? 'developer'; console.log(result1); // 👉️ "developer"

An easy way to think about the nullish coalescing operator (??) is that it allows us to provide a fallback value if the value to the left is equal to null or undefined.

If the value to the left is not null or undefined, the operator returns the value as is.

index.ts
const result1 = 'accountant' ?? 'developer'; console.log(result1); // 👉️ "accountant"

An alternative approach is to explicitly check whether the value is equal to null with a ternary operator.

index.ts
const role: string | null = null; const result2 = role === null ? 'tester' : role; console.log(result2); // 👉️ "tester"

The ternary operator returns the value to the left of the colon if the expression to the left of the question mark is truthy, otherwise the value to the right of the colon is returned.

In other words, if the role variable stores a null value, the ternary operator returns tester, otherwise we return the value stored in the role variable.

Notice that we used the strict equality operator (===). You might also see examples online that use loose equality (==).

index.ts
const role: string | null = null; const result2 = role == null ? 'tester' : role; console.log(result2); // 👉️ "tester"

The difference between the examples above is that the loose equality (==) operator checks for both null and undefined, whereas strict equality (===) checks only for the specific value (null in the example).

An easy way to visualize this is to use the operators to compare null and undefined.

index.ts
console.log(null == undefined); // 👉️ true console.log(null === undefined); // 👉️ false

The example shows that when using the loose equality operator (==), null is equal to undefined.

You can also use the logical OR (||) operator to provide a default value if a variable stores a null value.

index.ts
const role: string | null = null; const result3 = role || 'designer'; console.log(result3); // 👉️ "designer"

The logical OR (||) operator returns the value to the right if the value to the left is falsy.

This is a bit different than the nullish coalescing operator we used in the first example, because the logical OR (||) operator checks whether a value is falsy, whereas the nullish coalescing operator (??) checks whether a value is null or undefined.

The falsy values in JavaScript (and TypeScript) are undefined, null, 0, false, "" (empty string), NaN (not a number).

This means that the logical OR (||) operator will return the value to the right if the value to the left is any of the aforementioned 6 falsy values.

On the other hand, the nullish coalescing operator will return the value to the right only if the value to the left is null or undefined.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.