Double Question Marks in JavaScript: Nullish Coalescing Operator

A practical guide to the double question marks in JavaScript, the nullish coalescing operator, with patterns, examples, pitfalls, and best practices for robust code.

JavaScripting
JavaScripting Team
·5 min read
Nullish Coalescing - JavaScripting
double question marks javascript

The double question marks javascript refers to the nullish coalescing operator ?? in JavaScript, which returns the right-hand value when the left-hand side is null or undefined. It preserves other falsey values like 0 or "".

The double question marks javascript concept, also known as the nullish coalescing operator, provides a safe default when a value is null or undefined. It avoids treating other falsey values such as 0 or empty strings as missing, improving reliability and readability across code paths.

What the double question marks do in JavaScript

In the JavaScript landscape, the double question marks operator ?? is the core of the nullish coalescing pattern. The phrase double question marks javascript often appears in tutorials and code examples as a shorthand for providing defaults. The operator takes two operands and returns the right-hand operand if the left-hand operand is null or undefined; otherwise, it returns the left operand. This makes it easier to write robust defaults without accidentally treating other falsey values like 0, false, or an empty string as missing.

Consider a simple example:

JS
let userProvided = null; let defaultName = "Guest"; let displayName = userProvided ?? defaultName; // "Guest"

If userProvided is undefined or null, displayName becomes the default; if userProvided has a meaningful value like an actual string, number, or boolean, that value is used. The double question marks javascript pattern is especially useful for handling user input, API responses, and configuration objects where missing data should gracefully fall back to sensible defaults.

The syntax and typical use cases

The nullish coalescing operator ?? is a binary operator that pairs a left-hand value with a right-hand default. Use it whenever you want to substitute a safe default only when the original value is null or undefined. It does not trigger on other falsey values such as 0, false, or an empty string, preserving those values as meaningful data.

Examples:

JS
const name = inputName ?? "Anonymous"; const creditLimit = customer?.limits?.credit ?? 100;

In the first line, if inputName is null or undefined, name becomes "Anonymous". In the second, optional chaining prevents runtime errors if customer or limits is undefined, and ?? supplies a default when the left-hand side is undefined.

When writing code that reads from forms, APIs, or environment objects, this operator keeps defaults explicit and predictable, reducing bugs and improving readability compared to messy ternaries or multiple checks.

How it compares to || and optional chaining

The nullish coalescing operator differs from the logical OR operator in how it treats falsey values. Consider:

JS
const a = 0 ?? 42; // 0 const b = 0 || 42; // 42

Here, ?? preserves 0 because 0 is not null or undefined, while || substitutes the right-hand value for any falsey value. This distinction is crucial when 0, false, or an empty string are legitimate inputs.

You can combine ?? with optional chaining for safe defaults on deeply nested data:

JS
const length = arr?.length ?? 0;

This returns 0 when arr is null or undefined, and arr.length when it exists.

Patterns and best practices

Use ?? for default values when you want to treat only missing data as an absence rather than any falsey value. Typical patterns include:

  • Function parameters: function greet(name) { const nm = name ?? "Guest"; console.log(Hello ${nm}); }
  • Object property defaults: const title = obj?.title ?? "Untitled";
  • Nested data with optional chaining: const value = data?.config?.value ?? defaultVal;

Avoid overusing ?? in places where a falsey value like 0 or "" should be preserved. In such cases, explicitly check for those values or use a combination with conditional logic.

Common pitfalls and how to avoid them

  • Mixing with && and || without parentheses can lead to surprising results. Always wrap mixed expressions in parentheses to make evaluation intent explicit.
  • Relying on truthiness checks instead of nullish checks can mask missing data. Prefer ?? over a simple truthiness test when defaults depend on actual null or undefined.
  • Be aware of environments that lack native support. Modern tooling and transpilers can compile ?? for older runtimes, but testing remains essential to avoid runtime surprises.
  • When reading data from external sources, distinguish between undefined and null. ?? only handles nullish values; if a value can be explicitly null, you may want to normalize it first.

Compatibility, tooling, and practical adoption

Nullish coalescing is broadly supported in modern JavaScript engines, including current browsers and Node.js versions. If you maintain legacy code or target older environments, consider a transpilation step with a tool like Babel or TypeScript to maintain consistent behavior across runtimes. In team settings, documenting the preferred defaulting pattern helps reduce confusion and keep code consistent across modules.

For TypeScript users, ?? behaves the same way as in JavaScript, and TypeScript can help catch potential nullish scenarios with strict null checks enabled. Integrating tests that specifically cover defaulting logic can prevent regressions as your code evolves.

Quick reference cheat sheet

  • Basic usage: const x = a ?? b; // use b if a is null or undefined
  • With optional chaining: const v = obj?.prop ?? defaultVal;
  • In function defaults: function f(name) { return name ?? "Guest"; }
  • True nullish distinction: 0 and "" remain valid values, not defaults
  • Avoid ambiguity: wrap combined expressions in parentheses when mixing with && or ||

Common mistakes include assuming || and ?? are interchangeable and assuming undefined is the only missing value.

Authority sources

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
  • https://262.ecma-international.org/12.0/#sec-nullish-coalescing-operator
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_member_expression

Questions & Answers

What does the double question marks operator do in JavaScript?

The double question marks operator, or nullish coalescing operator, returns the right-hand value when the left-hand side is null or undefined. Otherwise, it returns the left-hand value. This creates safe defaults without treating other falsey values as missing.

The nullish coalescing operator returns the right side only when the left side is null or undefined; otherwise it uses the left side.

How is ?? different from the logical OR operator (||)?

Unlike ||, ?? only substitutes a default when the left value is null or undefined. If the left value is 0, false, or an empty string, ?? keeps that value unchanged.

?? only kicks in for null or undefined, not for other falsey values like zero or empty strings.

Can I chain ?? with && or ||?

Yes, you can, but you should use parentheses to make the evaluation order explicit. Without parentheses, the result can be surprising due to operator precedence.

You can chain with caution; use parentheses to be clear about what runs first.

Is the ?? operator supported in all environments?

Most modern browsers and Node.js versions support ??. If you work with older environments, use a transpiler or polyfills to ensure compatibility.

Modern environments support it; if you target old browsers, transpile your code.

What happens if the left side is an undefined variable?

If the left-hand side is an undefined variable (not declared), JavaScript will throw a ReferenceError before evaluating ??. This is not a fault of the operator; you need to define the variable first.

If the variable isn’t defined, you get a ReferenceError before ?? runs.

Can I use ?? with function parameters or objects?

Yes. You can use ?? with function defaults (name ?? 'Guest') and with object properties (const x = obj?.prop ?? defaultVal). It works well with optional chaining for safe access.

You can apply ?? in function defaults and with object properties, especially with optional chaining.

What to Remember

  • Use ?? to provide defaults only for nullish values
  • Distinguish ?? from || when zero and empty strings are meaningful
  • Wrap mixed expressions with parentheses to avoid precedence issues
  • Combine ?? with optional chaining for safe defaults
  • Prefer modern environments or transpile for legacy support

Related Articles