Nullish Coalescing Operator
JavaScript Fundamentals: Nullish Coalescing Operator (??)
Explain how the nullish coalescing operator works?
View Answer:
Interview Response: The nullish coalescing operator returns the first argument if it is not null or undefined—otherwise, the second one.
Technical Response: In simple terms, the ?? returns the first argument if it is not null/undefined—otherwise, the second one.
Example: The nullish coalescing operator, for example, is denoted by two question marks (??).
The result of a ?? b is:
Example: The nullish coalescing operator, for example, is denoted by two question marks (??).
The result of a ?? b is:
- if a is defined, then a,
- if a is not defined, then b.
Code Example:
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0
Is there a different method to get the same outcomes as the nullish coalescing operator?
View Answer:
Interview Response: The not equals operator checks the first value to see if it is null or undefined; it returns the second value if it is null or undefined.
Technical Response: Yes, you can use the NOT (!==) Equal operator to check to see if the first value is not equal to null or undefined; return the second value.
Code Example:
// We can rewrite result = a ?? b using the NOT equal (!==) operator.
result = a !== null && a !== undefined ? a : b;
What is an everyday use case for a nullish coalescing operator?
View Answer:
Interview Response: An everyday use case for the nullish coalescing operator is to provide a default value for a potentially undefined variable.
Code Example:
// here we show Anonymous if user is not defined
let user;
alert(user ?? 'Anonymous'); // Anonymous
// if the user has any value except null or undefined
let user = 'John';
alert(user ?? 'Anonymous'); // John
Can you use a chain or sequence of nullish coalescing operators?
View Answer:
Interview Response: Yes, we can use a sequence of nullish coalescing operators to select the first value from a list that is not null or undefined.
Code Example:
let firstName = null;
let lastName = null;
let nickName = 'Supercoder';
// shows the first defined value:
alert(firstName ?? lastName ?? nickName ?? 'Anonymous'); // Supercoder
Is there another operator we use to perform the same task as the nullish coalescing operator?
View Answer:
Interview Response: The OR operator can be used the same way as the nullish coalescing operator.
Code Example:
let firstName = null;
let lastName = null;
let nickName = 'Supercoder';
// shows the first truthy value:
alert(firstName || lastName || nickName || 'Anonymous'); // Supercoder
What is the primary distinction between the Nullish Coalescing Operator and the Logical OR Operator?
View Answer:
Interview Response: The OR operator returns the first truthy value, and the nullish operator returns the first defined value.
Technical Response: The key distinction is that the OR operator returns the first true value, whereas the null operator returns the first specified value.
In other words, logical OR (||) does not differentiate between false, zero, an empty string "" and null/undefined. They're all the same — false values, and we obtain the second if any of them are the first arguments of ||.
However, we may wish to utilize the default value only when the variable is null/undefined in practice. When the value is unknown or not set, this is the case.
In other words, logical OR (||) does not differentiate between false, zero, an empty string "" and null/undefined. They're all the same — false values, and we obtain the second if any of them are the first arguments of ||.
However, we may wish to utilize the default value only when the variable is null/undefined in practice. When the value is unknown or not set, this is the case.
Code Example:
let height = 0;
alert(height || 100); // 100
alert(height ?? 100); // 0
Does the nullish coalescing operator have high or low operator precedence?
View Answer:
Interview Response: According to the MDN, the precedence of the nullish coalescing operators is low.
Technical Response: The precedence of the ?? operator is relatively low: 5 in the MDN table. So ?? is evaluated before = and ?. But after most other operations, such as +, *. So if we’d like to choose a value with ?? in an expression with other operators, consider adding parentheses.
Code Example:
let height = null;
let width = null;
// important: use parentheses
let area = (height ?? 100) * (width ?? 50);
alert(area); // 5000
How should the Nullish Coalescing Operator be used with the AND (&&) and OR (||) operators?
View Answer:
Interview Response: Using the AND operator directly in line with the nullish coalescing operator is not recommended. It would help by wrapping the AND and OR operators in parentheses as a workaround.
Technical Response: For safety reasons, JavaScript forbids using ?? together with && and || operators unless parentheses explicitly specify the precedence.
Code Example:
// this will cause a syntax error
let x = 1 && 2 ?? 3; // Error: Syntax error
// Use explicit parentheses to work around it
let x = (1 && 2) ?? 3; // Works
alert(x); // 2