||) for handling default values.
const tries = options.tries || 10
This code is flawed, though, since if
options.tries is 0 then the default value of 10 will be used since 0 is a falsey value. In order to fix this the following code must be used.
const tries = options.tries == null ? 10 : options.tries
This code now will only use the default value if
option.tries is null or undefined. The only problem is this code is pretty clunky to write, so that is why the null coalesce operator was created.
If you prefer to learn visually, check out the video version of this article.
What Is The Null Coalesce Operator
const tries = options.tries ?? 10
The above code uses the null coalesce operator (
??) to check if
options.tries is null or undefined. If
options.tries is null or undefined then it will evaluate the right side of the operator which is 10 so 10 will be returned. Here are a few examples of the null coalesce operator being used to emphasize how it works.
undefined ?? 10 // Result: 10 null ?? 10 // Result: 10 0 ?? 10 // Result: 0 false ?? 10 // Result: false 'Hi' ?? 10 // Result: Hi 20 ?? 10 // Result: 20
As you can see only the values of null or undefined will cause the right side of the null coalesce operator to be evaluated. Any other value, even if it is falsey, will cause the right side of the operator to never be evaluated or returned. Because of this, the null coalesce operator is incredibly useful when dealing with default values for variables since falsey values like 0 will not be overridden by the default value.
Using The Null Coalesce Operator With Logical Or/And
It is possible to use the null coalesce operator with other logical operators like AND (
&&) and OR (
||), but parenthesis must be used in order to specify the order in which the logical operators evaluate.
0 || null ?? 10 // Uncaught SyntaxError: Unexpected token '??' (0 || null) ?? 10 // 10
0 || null is evaluated which returns null and then
null ?? 10 is evaluated which returns 10.
UPDATE (12/29/2021): The browser support for optional chaining is now over 90% and supported in nearly all major browsers.