Web Developers : What's with ?? in JS - Javascript

Screenshot from the tutorial

Understanding the Use of ?? in JavaScript: The Nullish Coalescing Operator

JavaScript is a versatile language that continues to evolve with every update, providing developers with new tools to write cleaner and more efficient code. One such addition is the Nullish Coalescing Operator, denoted by ??, which was introduced in ECMAScript 2020 (ES11). In this blog post, we will explore what the ?? operator is, how it works, and how it differs from other logical operators in JavaScript.

What is the Nullish Coalescing Operator?

The Nullish Coalescing Operator (??) is a logical operator that returns the right-hand operand when the left-hand operand is null or undefined. This is particularly useful for setting default values without inadvertently overriding valid falsy values like 0, NaN, or "" (empty string).

Basic Syntax

The syntax for the Nullish Coalescing Operator is straightforward:

let result = a ?? b;

In this example, result will be assigned the value of a if a is neither null nor undefined. If a is null or undefined, result will take the value of b.

Why Use ???

1. Avoiding Falsy Value Confusion

Before the introduction of ??, developers often relied on the logical OR operator (||) to set default values. However, || considers all falsy values (including 0, "", and false) as reasons to return the right-hand operand. This can lead to unintended consequences:

let value = 0;
let defaultValue = 10;
let result = value || defaultValue; // result is 10, but expected 0

Using the Nullish Coalescing Operator solves this problem:

let value = 0;
let defaultValue = 10;
let result = value ?? defaultValue; // result is 0, as expected

2. Cleaner Code

The ?? operator promotes cleaner and more readable code, especially when dealing with functions or APIs where null and undefined are common return values. This can make debugging easier and reduce the chances of errors.

Examples of Usage

Let's look at some practical examples of how the Nullish Coalescing Operator can be employed effectively.

Example 1: Setting Default Configuration Values

Imagine you have a function that accepts a configuration object:

function configure(options) {
    const settings = {
        timeout: options.timeout ?? 3000,
        retries: options.retries ?? 5,
    };
    return settings;
}

In this example, if options.timeout is null or undefined, it defaults to 3000. If options.retries is null or undefined, it defaults to 5.

Example 2: Working with User Input

Consider a scenario where user input is gathered:

function getUserName(userInput) {
    return userInput ?? "Guest";
}

In this case, if userInput is null or undefined, the function will return "Guest", ensuring that you always have a valid string to work with.

Important Considerations

Operator Precedence

The Nullish Coalescing Operator has a lower precedence than most other operators. If you plan to use it in conjunction with other operators, be sure to use parentheses to avoid confusion:

let result = (value1 || value2) ?? value3; // Grouping may be necessary

Compatibility

Before using the Nullish Coalescing Operator, ensure that your target environment supports ES2020. Most modern browsers and Node.js versions do, but it's always a good practice to check compatibility.

Conclusion

The Nullish Coalescing Operator (??) is a powerful addition to JavaScript that helps developers handle default values more effectively. By distinguishing between null/undefined and other falsy values, it allows for cleaner, more intentional code. As with any feature, understanding when and how to use it will enhance your coding skills and improve the quality of your applications.

Feel free to share your thoughts or experiences with the Nullish Coalescing Operator in the comments below! Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios