+91 7387620624

Nullish Coalescing Operator

Introduction

The Nullish Coalescing Operator (??) is used to provide a default value when a variable is null or undefined.

It was introduced in ECMAScript 2020 (ES11) and is commonly used to handle missing or optional values without affecting valid values like 0, false, or an empty string ("").

For automation engineers, the nullish coalescing operator is especially useful when working with API responses, configuration files, environment variables, test data, and optional object properties.

What is the Nullish Coalescing Operator?

The Nullish Coalescing Operator (??) returns the value on its left if it is not null or undefined. Otherwise, it returns the value on its right.

Syntax

value ?? defaultValue

  • If value is not null or undefined, it is returned.

  • If value is null or undefined, defaultValue is returned.

Why Do We Need the Nullish Coalescing Operator?

The nullish coalescing operator helps us:

  • Provide default values.

  • Handle missing API data.

  • Avoid unnecessary if...else statements.

  • Preserve valid values like 0 and false.

  • Write cleaner and more readable code.

Basic Example

let username = null;

let result = username ?? "Guest";

console.log(result);

Output

Guest

Another example:

let city = "Delhi";

console.log(city ?? "Unknown");

Output

Delhi

Since city is not null or undefined, its original value is returned.

Using with undefined

let email;

console.log(email ?? "No Email");

Output

No Email

Using with Numbers

let marks = 80;

console.log(marks ?? 0);

Output

80

Example with 0

let quantity = 0;

console.log(quantity ?? 10);

Output

0

Even though 0 is a falsy value, it is not null or undefined, so it is returned.

Using with Boolean Values

let isVerified = false;

console.log(isVerified ?? true);

Output

false

The value false is preserved because it is not null or undefined.

Using with Empty Strings

let message = "";

console.log(message ?? "Default Message");

Output

(The output is an empty string.)

The operator does not replace an empty string because it is a valid value.

Difference Between ?? and ||

This is one of the most important concepts.

Using Logical OR (||)

let count = 0;

console.log(count || 100);

Output

100

Because 0 is considered a falsy value.

Using Nullish Coalescing (??)

let count = 0;

console.log(count ?? 100);

Output

0

Since 0 is not null or undefined, it is returned.

Comparison Table

| Value | value || "Default" | value ?? "Default" |
|——–|———————-|———————-|
| null | Default | Default |
| undefined | Default | Default |
| 0 | Default | 0 |
| false | Default | false |
| "" | Default | “” |
| "Hello" | Hello | Hello |

Real-World Example

Suppose a website allows users to provide a nickname.

let nickname = null;

let displayName = nickname ?? "Guest User";

console.log(displayName);

Output

Guest User

Another example:

let discount = 0;

let finalDiscount = discount ?? 5;

console.log(finalDiscount);

Output

0

The valid value 0 is preserved.

Automation Testing Example

Automation engineers frequently work with API responses where some properties may be missing.

const response = {
    username: "John"
};

const city = response.city ?? "City Not Available";

console.log(city);

Output

City Not Available

Another example:

const apiResponse = {
    totalUsers: 0
};

const users = apiResponse.totalUsers ?? 100;

console.log(users);

Output

0

This is useful because a valid value of 0 should not be replaced.

Example using environment variables:

const timeout = undefined;

const defaultTimeout = timeout ?? 5000;

console.log(defaultTimeout);

Output

5000

Combining with Optional Chaining

The nullish coalescing operator is often used together with the Optional Chaining Operator (?.).

const user = {};

const city = user.address?.city ?? "Unknown";

console.log(city);

Output

Unknown

This safely handles missing properties without throwing an error.

Common Mistakes

Using || Instead of ??

Incorrect:

let quantity = 0;

console.log(quantity || 10);

Output

10

This replaces a valid value of 0.

Correct:

console.log(quantity ?? 10);

Output

0

Assuming ?? Checks All Falsy Values

Incorrect assumption:

false ?? true

Output:

false

The operator checks only null and undefined, not all falsy values.

Forgetting Parentheses with Logical Operators

JavaScript does not allow mixing ?? with && or || without parentheses.

Incorrect:

let result = null || undefined ?? "Default";

Correct:

let result = (null || undefined) ?? "Default";

console.log(result);

Best Practices

Use ?? for Default Values

Use the nullish coalescing operator whenever you want to provide a default value only for null or undefined.

Prefer ?? Over || for Numeric Values

If a value can legitimately be 0, use ??.

Combine with Optional Chaining

Use ?. and ?? together to safely access nested properties.

Example:

const email = user.profile?.email ?? "No Email";

Use Meaningful Default Values

Choose default values that make sense for your application or automation framework.

Conclusion

The Nullish Coalescing Operator (??) is a powerful feature that helps developers handle missing values in a clean and reliable way. Unlike the logical OR operator (||), it only replaces values that are null or undefined, preserving valid values such as 0, false, and empty strings.

In automation testing, it is especially useful when working with API responses, configuration settings, optional data, and environment variables.

Frequently Asked Questions (FAQs)

What is the Nullish Coalescing Operator?

The nullish coalescing operator (??) returns a default value only when the left-hand value is null or undefined.

What is the syntax of the nullish coalescing operator?

value ?? defaultValue

What is the difference between ?? and ||?

  • || replaces all falsy values (0, false, "", null, undefined).

  • ?? replaces only null and undefined.

Can ?? be used with optional chaining?

Yes. It is commonly used together with the optional chaining operator (?.) to safely access nested properties and provide default values.

Why is the nullish coalescing operator useful in automation testing?

Automation engineers use it to handle missing API fields, configuration values, environment variables, and optional object properties while preserving valid values such as 0 and false.

Key Takeaways

  • The nullish coalescing operator (??) provides a default value for null or undefined.

  • It does not replace valid values like 0, false, or an empty string.

  • It is different from the logical OR (||) operator.

  • Use ?? when working with optional or missing data.

  • It is commonly used with API responses and configuration settings.

  • It works well with the optional chaining operator (?.).

  • Use parentheses when combining ?? with && or ||.

  • It improves code readability and reduces conditional statements.

  • It is widely used in modern JavaScript development.

  • Understanding ?? helps write safer, cleaner, and more reliable JavaScript code.