The JavaScript code ?? is a recent addition to JavaScript. The two question marks ?? is referred to as nullish coalescing operator. The nullish operator is also used in Typescript. Typescript is a JavaScript alternative but Typescript is a strongly typed programming language which is built on JavaScript.

TypeScript 3.7 added support for the ?? operator, which is known as the nullish coalescing operator. We can use this operator to provide a fallback value for a value that might be null or undefined

The nullish coalescing operator works with the first defined value. In other words, the?? operator returns the first argument if it’s not null or undefined.

Let’s take for example: 

a ?? b

If a is defined, then a would be returned. But if a is not defined, then b would be returned.

The nullish coalescing operator is just a syntax that gets the first “defined” value of the two.

Let us see another example of how the ?? works

let userFirstName;

alert(userFirstName ?? "Anonymous");

In the example above, userFirstName wasn’t defined, therefore it outputs “Anonymous”.

Now let us assign a name-value to userFirstName 

let userFirstName = "Katherine";

alert(userFirstName ?? "Anonymous");

The output in the code above would be “Katherine” because the first argument which is userFirstName is defined.

Meanwhile, the OR operator || can also be used in the same way the ?? nullish coalescing operator is used. The || operator shows the first truthy value.

For example, let us check for any available items needed at the grocery store...

let toiletPaper = null;
let beverages = null;
let sparklingWater = "Available";

alert(toiletPaper || beverages || sparklingWater || "No item available ");

The output of the alert would be   “Available” since one of the three items is available.

The code above shows the first truthy value which is similar to the way the ?? operator works.

What is the difference between the OR || operator and the ?? nullish coalescing operator

The major difference between them is that ;

  • ?? operator returns the first “defined” value while
  • || operator returns the first “truthy” value

Why you should use ?? instead of || in JavaScript

The OR operator || has been in existence since the beginning of JavaScript. The nullish coalescing operator ?? was only recently added and that is because the OR operator wasn’t as efficient as it is supposed to be as it cannot differentiate between false, 0, an empty string “ ” and null/undefined.

Let’s take, for example, the height of an object…

let height = 0;

//using the || operator

alert(height || 100);

When you output the example code above, the|| operator treats the height as a falsy value because it is set to “0” and therefore output “100”.

let height = 0;

//using the ?? operator

alert(height ?? 100);

The ?? operator checks if height is defined or not. Since height is defined (i.e assigned a value which is “0”), the result would be “0” as the?? operator returns the first defined value.

The `` height = 0; ``  is a valid value. It should not be replaced with the default or interpreted as a false value.

For reasons like this, the nullish coalescing operator ?? is preferred in such cases. 

To use the ?? operator with other operators such as *,  &&, or ||, the expression has to be in parentheses to avoid getting incorrect results.

For example, the code below would output an error because expressions are not explicitly placed in parentheses…

let x = 2 && 4 ?? 3;
alert(x); //output would be “syntax error”

But if we explicitly place the expression in parentheses, we would get a valid result;

let x = (2 && 4) ?? 3;
alert(x); //output is 4

Conclusion

JavaScript, which is the most used and most preferred front-end programming language provides a lot of tools that makes most programmers write reusable and maintainable code. The recent addition of the ?? operator has enabled easy decision making in the JS syntax.

The nullish coalescing operator ?? provides a simple and precise way to choose the first “defined” value from a list or an expression.

The ?? operator has very low precedence ( a bit higher than ? and = ), so you should consider adding parentheses when using it in an expression.