Nullish coalescing operator in Javascript (??)

Alright, let’s dive into something that might sound fancy at first but is actually super handy: the Nullish Coalescing Operator, or ??
. Picture this operator as your go-to tool when you need to deal with missing or undefined values in your code—like finding out that your favourite snack has mysteriously disappeared from the pantry (again).
Nullish coalescing means, being able to either use the existing "truthy" value else fall back to the secondary value, I know that, that could sound a bit confusing, I will make it clear to you in just a few minutes, Keep reading...
What Exactly is ??
?
The nullish coalescing operator is represented by ??
, and it’s like a loyal friend who always checks if your stuff is actually there before leaving for that "Goa" trip! ( Oh, that still didn't happen?)
Before we proceed let's define "defined" for the sake of this article.
Defined is something that is not null
or undefined
.
Here’s how it works:
- If the value on the left side of
??
is defined (notnull
orundefined
), you get that value. - If it’s not defined, you get the value on the right side.
It’s like saying, "If this thing exists, great! If not, let’s use this backup plan instead."
A Quick Example
Let’s say you’re trying to display a user’s name, but you’re not sure if they’ve filled it out:
let user;
console.log(user ?? "Anonymous"); // Outputs: Anonymous (because user is undefined)
In this scenario, user
is undefined, so the ??
operator gives us "Anonymous" as a fallback. But if user
actually has a value, like this:
let user = "Shrikanth";
console.log(user ?? "Anonymous"); // Outputs: Shrikanth; Because user is NOT undefined but holds an actual value
Here, user
is defined, so we just get "Shrikanth" without needing the fallback.
But Wait, How is This Different from ||
?
Good question! Before ??
came into play, JavaScript developers often used the OR operator ||
for similar tasks. But here’s the catch: ||
returns the first truthy value, not the first defined value. That means it treats a whole bunch of stuff as falsey—like 0
, an empty string ""
, and false
. Check the example below to understand what I mean by that:
let height = 0;
console.log(height || 100); // Outputs: 100 (because 0 is falsy)
console.log(height ?? 100); // Outputs: 0 (because 0 is defined)
In the first example, ||
gives us 100 because it sees 0
as a falsy value. But in the second example, ??
sees that 0
is a perfectly valid number and sticks with it. So, if you only want to replace null
or undefined
, ??
is your guy.
Chaining ??
for Multiple Values
Sometimes you have more than one variable to check, like trying to pick a username from firstName
, lastName
, or nickName
. With ??
, you can chain them all together:
let firstName = null;
let lastName = null;
let nickName = "Batman";
console.log(firstName ?? lastName ?? nickName ?? "Anonymous"); // Outputs: Batman
Note: Now you know who Batman is!
It checks each value in order until it finds one that’s defined. Simple and efficient, right?
A Few Things to Keep in Mind
- Precedence: The
??
operator has pretty low precedence, which means it’s often a good idea to wrap it in parentheses when used in complex expressions. Like so: - No Mixing with
||
or&&
Without Parentheses: JavaScript doesn’t let you mix??
directly with||
or&&
without parentheses because it can lead to confusing results.
let x = (1 && 2) ?? 3; // Outputs: 2
The Takeaway
The nullish coalescing operator ??
is your go-to tool when you want to ensure you’re only replacing null
or undefined
values, not other falsely stuff like 0
or false
. It’s a straightforward, no-nonsense way to make sure your code handles default values just the way you want it to.
So next time you’re coding and want to make sure your snack stash is never empty (metaphorically speaking), give ??
a try!