Skip to main content

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:

  1. if a is defined, then a,
  2. 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.

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