Nullish Coalescing (??) - Handle Defaults the Right Way

Before ES2020, we(developers) mostly relied on the logical OR (||) operator for default values.

Let's say we want to set pageFromApi

const currentPage = pageFromApi || 1;

Issue

The || operator treats all falsy values as invalid:

• 0
• '' (empty string)
• false
• null
• undefined

EXAMPLE

// User is on page 0 (first page)
const pageFromApi = 0;

WRONG: page 0 gets replaced
const page = pageFromApi || 1;

console.log(page); // Output:1

Page 0 is valid, but || thinks it's falsy.

Nullish Coalescing (??)

The Nullish Coalescing Operator was introduced in ES2020 to solve this exact problem.

SYNTAX

const result = value ?? defaultValue;

EXAMPLE

// User is on page 0 (first page)
const pageFromApi = 0;

// CORRECT
const page = pageFromApi ?? 1;

console.log(page); // 0

Other Use Cases-

It also helps in code optimization.

// OR Logic
function getUsername(user) {
  if (user.name === null || user.name === undefined) {
    return "Guest";
  } else {
    return user.name;
  }
}

// OUTPUT examples:
getUsername({ name: "Chhavi" });   // "Chhavi"
getUsername({ name: "" });         // ""
getUsername({ name: null });       // "Guest"
getUsername({});                   // "Guest"

// Nullish Coalescing
function getUsername(user) {
  return user.name ?? "Guest";
}

// OUTPUT examples:
getUsername({ name: "Chhavi" });   // "Chhavi"
getUsername({ name: "" });         // ""
getUsername({ name: null });       // "Guest"
getUsername({});                   // "Guest"

Conclusion: same output but fewer lines of code.

When Should You Use ???

Nullish Coalescing(??):

• 0, false, or '' are valid values.
• Handling API responses or optional configs.

Logical OR:

-Any falsy value should trigger a default.
-You intentionally want aggressive fallback behavior.

----------------------------************-----------------------------