Nullish Coalescing Operator ( ?? ) In JavaScript

The Nullish Coalescing Operator ( ?? ) in JavaScript: What It Is and Why You Need It

In JavaScript, handling null or undefined values is a common challenge. For years, developers have used the logical OR (||) operator to provide default values. However, that approach sometimes leads to unexpected behavior when dealing with falsy values like 0 or an empty string "".

Nullish Coalescing Operator (??) is a cleaner, safer alternative introduced in ES2020.

What is the Nullish Coalescing Operator ?

The nullish coalescing operator (??) returns the right-hand operand when the left-hand operand is null or undefined.

Syntax :

let result = value1 ?? value2 ;

This means:

• If value1 is null or undefined, result will be value2.
• Otherwise, result will be value1.

Why Not Just Use OR ( || ) ? 🤔

The || operator also returns the right-hand side when the left-hand side is falsy — which includes 0, "" (empty string), false, NaN, null, and undefined.

That becomes a problem if you’re dealing with values like 0 or an empty string that are valid in your context.

✅ Example: ?? vs ||

let userInput = 0;

let resultWithOR = userInput || 10;
let resultWithNullish = userInput ?? 10;

console.log(resultWithOR);   
// If we use OR operator Output is: 10 (because 0 is falsy)

console.log(resultWithNullish); 
// If we use Nullish Coalescing Operator Output is: 0 (because 0 is not null or undefined)

As you can see:

• || treated 0 as falsy and replaced it with 10.
• ?? correctly preserved 0 because it's not null or undefined.

⚠️ Watch Out: No Mixing with && or || Without Parentheses

You cannot directly mix ?? with || or && without grouping them using parentheses. JavaScript will throw a SyntaxError.

Get Ishan Illangakoon’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

✅ Correct:

let result = (value1 || value2 ) ?? value3 ;

❌ Incorrect:

let val = value1 || value2 ?? value3 ; // SyntaxError

🔧 Common Use Cases

1. Default values for optional parameters

function greet(name) {
  name = name ?? "Guest";
  console.log(`Hello, ${name}!`);
}

greet();           // Hello, Guest!
greet("Alice");    // Hello, Alice!

Explanation:

If name is null or undefined, use "Guest" instead.

2. Safe retrieval of object properties

const user = { age: 25 };
const name = user.name ?? "Anonymous";

console.log(name); // "Anonymous"

Explanation:

• Since name does not exist on the object, user.name is undefined. Since it is undefined, the right-hand value "Anonymous" is used.

3. Avoiding overwriting with falsy values like 0 or false

const settings = {
  volume: 0,
  darkMode: false
};

const volume = settings.volume ?? 50;   // Keeps 0
const darkMode = settings.darkMode ?? true; // Keeps false

console.log(volume);    // 0
console.log(darkMode);  // false

Explanation:

• ?? only replaces null or undefined.0 and false are valid values, so they are not replaced.

📝 Final Thoughts

• The nullish coalescing operator ?? gives you more precise control over default values, especially when 0, false, or "" are valid data.
• It’s a small addition to the language, but one that can make your code cleaner and more predictable.
• Give it a try in your next JavaScript project — you’ll quickly see the difference!

Thank you 🙂