Nullish coalescing operator (??)

In a programming language like JavaScript, as well as many other programming languages, a lot of effort is being put into making sure that a variable or return value actually HAS a value and isn't in fact NULL (or undefined in JavaScript).

So, before using a variable, you will often need to make sure that it has a value, unless you already know this to be true. A place where this is very common is inside of a function, where you want to make certain that any parameters you're going to use actually has a value. Here's an example from another article in this tutorial:

function AddNumbers(n1, n2, n3)
{
	return n1 + n2 + n3;
}

Since JavaScript doesn't really do any validation when it comes to the amount or type of arguments you pass to a function, the above function could be called like this:

AddNumbers(null);

The result would not make sense, since the first parameter is NULL and the two others would be undefined - you can't really do math on that. Therefore, we would usually do some validation on the parameters, like this:

function AddNumbers(n1, n2, n3)
{
	if(n1 == null)
		n1 = 0;
	if(n2 == null)
		n2 = 0;
	if(n3 == null)
		n3 = 0;
	return n1 + n2 + n3;
}

Using the ?? operator

That's not very good looking, but fortunately for us, JavaScript comes with a very helpful operator: The Nullish coalescing operator (??). It works like this:

testExpression ?? "fallback value";

It will simply return either the left or the right part of the statement, depending on whether the left part is NULL or undefined or not. It's mostly just syntactic sugar, but it will make the above code shorter and easier on the eye:

function AddNumbers(n1, n2, n3)
{
	n1 = n1 ?? 0;
	n2 = n2 ?? 0;
	n3 = n3 ?? 0;	
	return n1 + n2 + n3;
}

alert(AddNumbers(null));
alert(AddNumbers(1, 2, 3));

So in this case, if one or several of the parameters doesn't have a value, it will fallback to 0. You are free to provide any type of fallback value, like a string or the return value of another function - the sky is the limit here.

?? vs. ||

Prior to the introduction of the Nullish coalescing operator (??), the logical OR operator (||) was used a lot to accomplish the same as the ?? operator. And you may still see code like this a lot:

function AddNumbers(n1, n2, n3)
{
	n1 = n1 || 0;
	...

As you can see, I have replaced the ?? operator with the || operator. And if you do the same, for the example above, you will see the exact same, and expected, behavior: The parameters will fall back to the value of 0 if they are not provided. However, there's a very important difference between the two operators: The ?? operator will only react to NULL or undefined, while the || operator will respond negatively to any "falsy" value.

As we talked about previously in this tutorial, "falsy" is used to describe any value that is actually false or could be considered false in a boolean context. This includes the number 0, empty text strings and so on. Therefore, you should pay attention to which operator you use, because it will make a difference, as illustrated by this example:

function SaySomething(msg1, msg2)
{
	msg1 = msg1 || "fallback";
	msg2 = msg2 ?? "fallback"
	alert("Message #1: " + msg1);
	alert("Message #2: " + msg2);
	
}

SaySomething();
SaySomething("", "");
SaySomething(0, 0);

I use the || operator for the first message and the ?? for the second message. Notice how they react differently to the various arguments I supply them with. The fallback message for msg2 is only used in the first call to the function, because it responds only to being undefined.

Nullish coalescing assignment: ??=

The nullish coalescing assignment operator (sometimes referred to as the logical nullish assignment operator) will allow you to assign a value to a variable, but only if value of this variable is NULL or undefined, without checking it first. So, before this operator, you could see a piece of code like this:

let a = null;
if(a == null)
	a = 42;
alert(a);

Or you could use the Nullish coalescing operator to make it a bit shorter:

let a = null;
a = a ?? 42;
alert(a);

But why not go all the way and make it even shorter, using the Nullish coalescing assignment operator, like this:

let a = null;
a ??= 42;
alert(a);

Again, this is just syntactic sugar, but it is a bit easier to write and perhaps even easier to read? I will let you be the judge of that.

At this point, you may be a bit confused and ask your self: Are there any differences between these two operators? And yes, there is - a subtle one, but still a difference. While the Nullish coalescing operator (??) will return the left part of the statement if its not NULL or undefined, the Nullish coalescing assignment operator (??=) will not return anything - it only works for assigning a value to the left part of the statement in case its NULL or undefined.

Summary

Use the Nullish coalescing operator (??) to provide a fallback value in case the variable in question is NULL or undefined. As an alternative, you can use the logical OR operator (||), which will use the fallback value for anything that can be considered false, including NaN, 0, empty text strings and so on.

If you're just looking to assign a value to a variable in case the variable is NULL or undefined, you can use the Nullish coalescing assignment operator (??=).