Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Objects

JavaScript Nullish Coalescing

Written by Published

The JavaScript nullish coalescing operator gives a fallback only when a value is null or undefined.

It is written as two question marks.

It is safer than ||, which also replaces 0, empty strings and false.

Example

Example

javascript

const count = 0;

console.log(count ?? 10);
console.log(count || 10);

The output is 0 then 10.

|| replaced a perfectly valid zero.

What is Nullish Coalescing?

?? returns the right side only when the left is null or undefined.

Every other value, including falsy ones, is kept.

This makes it the right choice for default values.

Syntax

Syntax

javascript

const value = maybeMissing ?? fallback;

Two question marks, not one.

The Problem with ||

|| replaces every falsy value, not just missing ones.

Example

Example

javascript

const settings = { volume: 0, name: "" };

console.log(settings.volume || 50);
console.log(settings.name || "unknown");

Both real values were thrown away.

?? Keeps Real Values

Only null and undefined trigger the fallback.

Example

Example

javascript

const settings = { volume: 0, name: "" };

console.log(settings.volume ?? 50);
console.log(settings.name === "" ? "empty kept" : "changed");

The zero and the empty string both survive.

With Optional Chaining

This pair is used constantly with data from an API.

Example

Example

javascript

const user = { name: "Ada" };

console.log(user.address?.city ?? "no city");

The chain gives undefined, so the fallback is used.

Cannot Mix with && or || Directly

Combining them without brackets is a syntax error.

JavaScript insists you make the order explicit.

Example

Example

javascript

const a = null;
const b = "yes";

console.log((a ?? b) || "fallback");

The brackets say which operator runs first.

Choosing Between Them

Use ?? when 0, an empty string, or false are valid values.

Use || when any falsy value should be replaced.

Example

Example

javascript

function setVolume(level) {
  return level ?? 50;
}

console.log(setVolume(0));
console.log(setVolume(undefined));

A deliberate 0 is respected, while a missing value gets the default.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Nullish Coalescing</title>
</head>
<body>

  <h1>JavaScript Nullish Coalescing</h1>

  <p id="result"></p>

  <script>
    const settings = { volume: 0 };

    const withOr = settings.volume || 50;
    const withNullish = settings.volume ?? 50;

    document.getElementById("result").innerHTML =
      "Using ||: " + withOr + "<br>Using ??: " + withNullish;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try removing the volume:

Delete the property and see both operators agree.

Important Points

  • ?? only falls back on null or undefined.
  • || falls back on every falsy value.
  • Use ?? when 0 or an empty string are valid.
  • It cannot be mixed with && or || without brackets.
  • It pairs naturally with optional chaining.

Conclusion

Nullish coalescing fixes a long-standing problem with default values.

It keeps a deliberate zero instead of quietly replacing it.

Together with optional chaining it makes incomplete data much safer to handle.

PreviousJavaScript Optional ChainingNextJavaScript Getters and Setters