November 6, 2023
The double question mark (
undefined, otherwise it returns the left-hand side. This operator provides a cleaner syntax for selecting the first "defined" value from a list. In this guide, we’ll cover the operator and its use cases.
What is the
JS developers often encounter scenarios where a default value is required in case a given value is
undefined. Before ES2020, which introduced the
?? operator, this was commonly handled by logical OR (
||). However, the OR operator falls short in certain cases because it returns the right-hand side operand for any falsy value (
NaN), which can lead to unintended consequences like incorrectly evaluating a valid falsy input as a reason to use a default value.
How does the double question mark work?
?? operator works by evaluating the left-hand side expression first. If the result is not
undefined, it is returned. Otherwise, the right-hand side is evaluated and returned. Here’s the basic syntax:
result will be
result will be
Use cases for
?? operator is particularly useful when you have a chain of potential values and you want to pick the first one that isn’t
undefined. It’s perfect for setting default values for variables that may not be initialized.
In this code snippet,
options will be assigned to
userOptions if it’s not
defaultOptions will be used.
It’s important to distinguish
?? from the
|| operator. Here's an example highlighting the difference:
orderQuantity gets the value of
0 is a falsy value. With
correctOrderQuantity preserves the value
0 since it’s not
?? with other operators
?? has lower precedence than most other operators, but it’s higher than
?. You often need parentheses when combining it with certain operators to ensure the correct order of evaluation.
Without the parentheses, it would throw an error because
?? cannot be directly mixed with
|| without explicit parentheses.
- You cannot mix the
- Remember that only
undefinedare considered "nullish". Other falsy values like
Browser and environment compatibility
As of ES2020, the
Detailed usage and examples
Beyond simple value assignment,
?? can be incredibly useful in a variety of contexts:
Function arguments: Providing defaults for function parameters that haven't been passed or are
Ternary operations: Using
?? within a ternary operation to provide a default for a potentially nullish condition:
Complex expressions: Managing state in applications, especially when dealing with store values that may not be initialized:
Interaction with Optional Chaining
The optional chaining operator
?. can be used in conjunction with
?? to provide a default value after checking for
undefined properties in a chain:
In this example, if
null, then 'No name provided' will be used.
It’s also possible to nest
?? for multiple layers of null checks:
config.fallback, whichever is the first value that isn’t
Polyfills and Transpilation
To ensure compatibility with older browsers, you can use a polyfill for
??. Alternatively, a transpiler like Babel with the appropriate plugins can convert
?? into ES5-compliant code:
How to Truncate Date in MySQL