So here’s the problem. You have an incoming value. That value MAY be null or undefined. It may not. If it is, NOT null or undefined, you want to use it somehow. Maybe assign it to a new variable, maybe do some calculation on the value. But if it IS null or undefined, then you want to use a different value and assign THAT value to a new variable, or use this different value in the calculation.
Let’s look at an example.
selectedItem = selectedItem ?? defaultItem;
Here’s a good example. Some piece of code gives us the selected item. But what if the user didn’t select anything and we get a null? Then we can use some kind of default item instead.
How does this look without the
nullish coalescing operator?
selectedItem = selectedItem == null || selectedItem === undefined ? defaultItem : selectedItem;
Although if you know that it couldn’t be a falsey value such as 0 or false or empty string then you can do this:
selectedItem = !selectedItem ? defaultItem : selectedItem;
And there’s even a trick to shorten that up like this
selectedItem = selectedItem || defaultItem;
But a warning, this works ONLY if a falsey value isn’t possible. So be careful using this.
Let’s look at another example. Often times we want to do something with an element if it exists in the DOM, and if not, we want to do that same thing to something else. Perhaps we want to prompt the user that they can close the modal that is open, or open the modal if it’s not open by highlighting the close button or the open button if the modal isn’t in the DOM.
const node = document.getElementById("#modal") ?? document.getElementById("#modalSelector");
Or maybe we want to log with either the current user’s ID OR the value -1 to indicate that there wasn’t a logged in user.
console.log("Added item is: ", item ?? 'NA');
This operator is essentially a shortcut for using something like if(blah === null) except it just helps you replace a value that could be null with a different value. So in a sense it’s more limited than an if, but also more succinct.
Again, it’s only useful if we need to use an item, or use a different item in its place if the original is null.
Another advantage of the nullish coalescing operator is that it only works with items that are null or undefined. NOT any falsey value. So the following works the way we want it.
const total = subTotal + subTotal * (tax ?? defaultTax);
Here, if the tax rate is 0, then that is what is used. The default tax value is only used if taxRate is null or undefined.
No chaining with AND or OR operators
It is not possible to combine both the AND (&&) and OR operators (||) directly with ??. A
SyntaxError will be thrown in such cases.
null || undefined ?? "foo"; // raises a SyntaxError true || undefined ?? "foo"; // raises a SyntaxError
However, providing parenthesis to explicitly indicate precedence is correct:
(null || undefined) ?? "foo"; // returns "foo"
nullish coalescing operator can really clean up your code when dealing with null values. It's succinct, it's pretty clear, and it solves a bunch of problems.