Set a default value if Null or Undefined in TypeScript

# Set a Variable's value if it's Null or Undefined in TypeScript

Use the logical nullish assignment operator to set a variable's value if it's equal to null or undefined.

The logical nullish assignment (??=) operator assigns the provided value to the variable if it's equal to null or undefined.

index.js

Copied!
let role: string | null | undefined = null;

role ??= 'developer';
console.log(role); // 👉️ "developer"

set variable value if its null or undefined

The code for this article is available on GitHub

We used the logical nullish assignment (??=) operator to assign a value to the role variable if it stores a null or undefined value.

If the value of the role variable is not equal to null or undefined, the logical nullish assignment (??=) operator short-circuits and doesn't assign the value to the variable.

index.js

Copied!
let role: string | null | undefined = 'accountant';

role ??= 'developer';

console.log(role); // 👉️ accountant

Notice that we used the let keyword to declare the variable. Variables declared using const cannot be reassigned.

An alternative approach is to use the nullish coalescing (??) operator.

# Set a default value if Null or Undefined in TypeScript

Use the nullish coalescing operator (??) to set a default value if null or undefined in TypeScript.

index.ts

Copied!
let role: string | null | undefined = null;

role = role ?? 'developer';
console.log(role); // 👉️ "developer"

set default value if null or undefined

The code for this article is available on GitHub

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 isn't null or undefined, the operator returns the value as is.

index.ts

Copied!
const result = 'accountant' ?? 'developer';
console.log(result); // 👉️ "accountant"

Otherwise, the variable gets assigned a new value.

# Set a default value if Null or Undefined using the ternary operator

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

index.ts

Copied!
let role: string | null | undefined = undefined;

role = role == null ? 'tester' : role;
console.log(role); // 👉️ "tester"

set default value if null or undefined using ternary operator

The code for this article is available on GitHub

The ternary operator is very similar to an if/else statement.

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

In other words, if the role variable stores a null or an undefined value, the ternary operator returns tester, otherwise, the value stored in the role variable is returned.

You can imagine that the value before the colon is the if block and the value after the colon is the else block.

Notice that we used the loose (==) equality operator in the example.

The loose (==) equality operator checks for both null and undefined.

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

index.ts

Copied!
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.

# Set default value to variable if it's Null or undefined using `if`

You can also set a default value to a variable if it's equal to null or undefined in a simple if statement.

index.ts

Copied!
let myVar: string | null | undefined = undefined;

if (myVar === undefined || myVar === null) {
  myVar = 'updated value';
}

// 👇️ "updated value"
console.log(myVar);

set default value using if

The code for this article is available on GitHub

We used the logical OR (||) operator to chain 2 conditions.

If either of the conditions returns a truthy value, the if block runs.

We check if the myVar variable is equal to null or undefined and if it is, we reassign the variable.

# Set a default value if Null or Undefined using logical OR (||)

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

index.ts

Copied!
const role: string | null = null;

const result = role || 'designer';
console.log(result); // 👉️ "designer"

The code for this article is available on GitHub

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

This is different from the nullish coalescing operator we used in the first example.

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.

You can use the search field on my Home Page to filter through all of my articles.

Set a default value if Null or Undefined in TypeScript

# Set a Variable's value if it's Null or Undefined in TypeScript

# Set a default value if Null or Undefined in TypeScript

# Set a default value if Null or Undefined using the ternary operator

# Set default value to variable if it's Null or undefined using if

# Set a default value if Null or Undefined using logical OR (||)

Borislav Hadzhiev

# Set default value to variable if it's Null or undefined using `if`