Nullish Coalescing in JavaScript: A Practical UK Guide
17 August 2026
Master ?? operator in JavaScript. UK examples, vs ||, pitfalls, browser support. Essential guide for 2026.
What Is Nullish Coalescing?
The nullish coalescing operator (??) is a JavaScript feature introduced in ES2020 that provides a clean way to fall back to a default value when the left-hand expression is null or undefined. Unlike the logical OR (||) operator, which treats all falsy values as triggers, ?? only kicks in for nullish values, meaning you can safely use defaults for numbers, booleans, or strings that might legitimately be 0, false, or an empty string. For example, setting a UK user's default region could be written as const region = user.region ?? 'GB'; — if user.region is undefined, you get 'GB'; if it's an empty string, you keep that value, which is often the desired behaviour in real-world apps.
?? vs ||: Key Differences
The logical OR operator (||) returns the right-hand operand if the left is any falsy value, including 0, '', false, NaN, and null. This can cause subtle bugs. Consider a UK e-commerce site: const discount = value || 0.2; — if value is 0 because there's no discount, || will incorrectly replace it with 20%. With ??, you'd write const discount = value ?? 0.2; and 0 is preserved because it's not nullish. This distinction is crucial when handling APIs that may return numeric values like `0` as a valid response. By choosing ?? over ||, you ensure your code only applies defaults when a value is genuinely missing, not when it's merely falsy.
UK-Specific Use Cases
In UK web development, nullish coalescing shines in settings and configuration. For instance, when loading a user's VAT rate from an API, you might want to default to 20% (the standard UK VAT) only if nothing is returned. Using ?? preserves a 0% rate for exempt items. Similarly, for shipping costs, a free shipping threshold could be £0 — with ??, a 0 value remains valid. Another practical example is handling cookie preferences or geographical defaults: const currency = prefs.currency ?? 'GBP';. It's also perfect for fallback text in UK English vs. American English: const label = translations.title ?? 'Checkout'; where an empty string shouldn't trigger a fallback.
Combining with Optional Chaining
Optional chaining (?.) and nullish coalescing (??) are a powerful duo because they address two sides of the same problem: safely accessing nested properties and providing defaults. In modern JavaScript, you might encounter code like const street = user?.address?.street ?? 'No address provided';. This avoids the dreaded 'Cannot read properties of undefined' error. For a UK-based SaaS app, you could fetch a user's business details from a nested object and fallback to a generic location: const office = user?.company?.address?.city ?? 'London';. Used together, these operators make your code more robust and readable, reducing the clutter of multiple ternary checks or `if` statements.
Browser Support and Best Practices
As of 2026, nullish coalescing is fully supported in all modern browsers and Node.js 14 and later. If you're targeting older environments, you'll need a transpiler like Babel or TypeScript (3.7+) to compile it down. A key best practice is to avoid mixing ?? with || or && without parentheses, because JavaScript disallows this for safety: `a || b ?? c` is a SyntaxError. Wrap them: `(a || b) ?? c`. Additionally, use linting rules like ESLint's `no-mixed-operators` to catch issues early. In UK teams, adopting ?? improves code clarity, especially when handling REST API responses that might include null values, ensuring your applications behave predictably.
FAQ
You cannot directly mix ?? with || or && without parentheses. The JavaScript syntax forbids it to prevent ambiguity. For example, `a || b ?? c` is a SyntaxError. To combine them, you must wrap one operator in parentheses, such as `(a || b) ?? c`. This ensures the intended logic is clear and avoids unexpected behaviour.