Presenting Nullish coalescing operator ??

It is a logical operator that returns its right-hand side output when its left-hand side output is null or undefined and otherwise returns its left-hand side output. ?? also supports chaining just like && and || operators but cannot be used together with && or || operators, unless explicitly specified with parentheses.

In other words, ?? returns the first argument if it’s not null/undefined. Otherwise, the second one.

How ?? is different than OR || operator -

In OR || operator, it returns the right-hand side output if the left-hand output is any falsy value, not only null or undefined. But the ?? operator will return the right output if and only if the left output is null or undefined.
We'll see later that how does this makes difference?

What comes under falsy values -

Here's a list of values that will be considered falsy:

• false : The Boolean value
• 0, -0, 0n : The Number zero, Negative zero, and BigInt zero
• '',"",`` : The Empty String Value
• null: The absence of any value.
• undefined : The primitive value which is the initial value of any variable
• NaN : not a number.

Now, if you use an OR || operator to provide some default value to another variable foo, you may encounter unexpected behaviours if you consider some falsy values as usable (e.g., false or 0).

Note: The precedence of the ?? operator is lower than the || operator.

Let us look at some examples -

1. A common pattern while assigning a default value to a variable is using OR operator but this may cause some unexpected results.

   //with OR operator
   let count = 0;
   let qty = count || 10; 
   console.log(qty);    // 10
   
   //with Nullish Coalescing Operator
   let count = 0;
   let qty = count ?? 10;
   console.log(qty);    // 0
   

2. Short-Circuiting: As the right-hand side expression is not evaluated if the left-hand side proves to be neither null nor undefined we can also short circuit our code using ?? operator.

   function A() { console.log('A was called'); return undefined;}
   function B() { console.log('B was called'); return false;}
   function C() { console.log('C was called'); return "foo";}
   
   console.log( A() ?? C() );
   // logs "A was called" then "C was called" and then "foo"
   // as A() returned undefined so both expressions are evaluated
   
   console.log( B() ?? C() );
   // logs "B was called" then "false"
   // as B() returned false (and not null or undefined), the right
   // hand side expression was not evaluated
   

3. We can also use a sequence of ?? to select the first value from a list that isn’t null/undefined -

   let firstName = null;
   let lastName = null;
   let nickName = "neoGrammer";
   let user = firstName ?? lastName ?? nickName ?? "Anonymous"; // neoGrammer
   
   // shows the first defined value:
   console.log(user);      // neoGrammer
   

4. We can use ?? with && and || but they should be explicitly specified with parentheses.

   let x = 1 && 2 ?? 3;     // Syntax error
   
   let x = (1 && 2) ?? 3; // Works
   
   console.log(x); // 2
   

Awesome you have now learnt a new thing in JavaScript, Congrats 🎉🎉🎊