JavaScript Nullish Coalescing

 An introduction to this new feature of JavaScript: nullish coalescing. A new JavaScript feature that’s going to be widely used, soon, is the nullish coalescing operator ??.

What’s that ?? ?

Have you ever used  ||  to set a default value if a variable was null or undefined?

For example, like this:

const myColor = color || 'red'

Well, nullish coalescing is going to replace  ||  in there:

const myColor = color ?? 'red'

Why?

Well, there is a whole range of bugs that hide underneath the surface when using  ||  to provide a fallback value.

In short,  ||  handles values as falsy. ?? handles values as nullish (hence the name).

Which means that with || the second operand is evaluated if the first operand is undefined, null, false, 0, NaN or ' '.

?? on the other hand limits this list to only undefined and null.

Which might suit your use case better!

Below is the example of the Nullish Coalescing Operator.

<script>
function foo(bar) {
    bar = bar ?? 55;
    document.write(bar);
    document.write("</br>");
      
}
foo();  // 55
foo(22); // 22
</script>

Output :-

55
22

Nullish Coalescing Operator: It is a new feature introduced in this ECMA proposal has now been adopted into the official JavaScript Specification. This operator returns the right hand value if the left hand value is null or undefined. If not null or undefined then it will return left hand value.

Supported Browsers: The browsers supported by JavaScript Nullish Coalescing Operator are listed below:

• Google Chrome 80
• Firefox 72