You probably have seen double question marks (??) while checking new code and don’t understand much what the question marks mean. Unless you have experience working with other programming languages such as C#, you might not be aware of the terminology either. In this article, I will explain what ?? means.
The double question marks (??) are also called nullish coalescing operators and they allow to use of a default value set on the right side of the operator in case the initial value from the left side of the operator is
undefined. To make things simpler, let’s look at an example.
let random; const color = random ?? 'red';
In our previous example, we have two variables:
random variable is undefined. Therefore, at the moment of declaring and assigning the value to the
color variable, it will default to “red”.
Table of Contents
Difference Between Logical OR (||) and Nullish Coalescing Operator (??)
let random; const color = random || 'red';
In this case, the value of
color variable would be “red”.
You might be wondering: What is the difference between the logical OR operator and the nullish coalescing operator?
The logical OR operator will use the default value if the initial expression is considered falsy. A value is considered falsy because when attempted to convert the value into a boolean, the result will be
If you are looking to check the complete list of falsy values, I recommend checking this falsy article.
If you attempt to convert all of these values to a boolean, you will always get a
console.log(Boolean(false)); // it will log: false console.log(Boolean(0)); // it will log: false console.log(Boolean(null)); // it will log: false console.log(Boolean(undefined)); // it will log: false
This is slightly different from the nullish coalescing operator as the later will use the default value whenever the initial expression is
undefined. The following example should provide more clarity between the differences of the two operators:
// examples using the logical OR operator console.log(0 || 'default'); // it will log: default console.log(5 || 'default'); // it will log: 5 console.log(-0 || 'default'); // it will log: default console.log(-3 || 'default'); // it will log: -3 console.log(false || 'default'); // it will log: default console.log(true || 'default'); // it will log: true console.log(null || 'default'); // it will log: default console.log(undefined || 'default'); // it will log: default // examples using the nullish coalescing operator console.log(0 ?? 'default'); // it will log: 0 console.log(5 ?? 'default'); // it will log: 5 console.log(-0 ?? 'default'); // it will log: -0 console.log(-3 ?? 'default'); // it will log: -3 console.log(false ?? 'default'); // it will log: false console.log(true ?? 'default'); // it will log: true console.log(null ?? 'default'); // it will log: default console.log(undefined ?? 'default'); // it will log: default
Not Created By TypeScript
More TypeScript Tips!
There is a list of TypeScript tips you might be interested in checking out
- TypeScript | The Unknown Type Guide
- TypeScript | Organizing and Storing Types and Interfaces
- TypeScript | Objects with Unknown Keys and Known Values
- TypeScript | Union Types – Defining Multiple Types
- TypeScript | Declare an Empty Object for a Typed Variable
- TypeScript | Union Types vs Enums
- TypeScript | Convert Enums to Arrays
Did you like this TypeScript tip?