What is the JavaScript double question mark??

The JavaScript double question mark (??), also known as the nullish coalescing operator, is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and returns the left-hand side operand otherwise.

Here’s a breakdown of its functionality and use cases:

Core Functionality:

- The ?? operator provides a concise way to handle default values for variables that might be null or undefined. It is particularly useful in situations where you want to avoid using the logical OR (||) operator, which also treats falsy values like 0, '' (empty string), false, and NaN as default values.

Syntax:

leftOperand ?? rightOperand

How it Works:

- If leftOperand is null or undefined, the operator returns rightOperand.

- Otherwise, the operator returns leftOperand.

Example Scenarios:

1. Providing Default Values:

let userName = user.name ?? "Guest";
// If user.name is null or undefined, userName will be "Guest". Otherwise, it will be the value of user.name.


2. Using with Optional Chaining:

let userAddress = user?.address?.city ?? "Unknown City";
// If user or user.address is null or undefined, userAddress will be "Unknown City". Otherwise, it will be user.address.city.


3. Handling Function Arguments:

function processData(config) {
const timeout = config?.timeout ?? 5000;
//If config or config.timeout is null or undefined, it will default to 5000
console.log(timeout);
}


Comparison with the Logical OR (||) Operator:

- The || operator evaluates the left-hand operand for truthiness. It returns the right-hand operand if the left-hand operand is falsy (false, 0, '', null, undefined, NaN).

- The ?? operator only checks for null or undefined on the left side.

Key Advantages:

- Specificity: The ?? operator is more specific about what constitutes a default condition, avoiding unexpected behavior with falsy values like 0 or an empty string.

- Readability: The operator makes it clear that you're only targeting specifically null or undefined values, thus enhancing readability of your JavaScript code.

Browser Compatibility:

- This operator was introduced in ECMAScript 2020 (ES11), so make sure your target environments support it. If you need to support older browsers, you might have to use a polyfill or consider alternatives.

In summary, the JavaScript double question mark (??) is a powerful tool for concise and safe handling of default values, especially useful for differentiating between falsy and specifically null or undefined values. It helps you write more robust and readable code when dealing with potentially undefined variables.

Learn more about this