Redefine your Logic for stricter, safer JavaScript defaults with the '??' operator

The title is not a clickbait. There exists an actual '??' operator in JavaScript known as the Nullish coalescing operator. This operator accepts operands on either side and returns the right-hand side operand only when the left-hand side operand is a nullish value. This operator is absolutely a newer one and it was introduced during ES2020 to JavaScript.

falsy and nullish. Aren't these the same?

No. A value is considered falsy if it coerces to false when evaluated in a boolean expression. In this regard, the following values are considered to be falsy

null - Absence of any object value or a direct null is falsy
undefined - Variable that hasn't assigned any value is falsy
false - The boolean false is falsy
0 - The integer 0 is falsy
-0 - The integer negative 0 is falsy
"" - An empty string is falsy
NaN - Not a Number is falsy

So, what is considered nullish in JavaScript?. Values that are either null or undefined are nullish in JavaScript.

Before getting hands-on with this operator, we should understand the working of short circuit operators.

Short circuit operators

Short circuit operators are basically 'Logical AND' && and 'Logical OR' || operators. They are used to perform concise conditional logic.

&& operator

Syntax: expression1 && expression2

• returns expression1 if it is falsy and expression2 is not evaluated at all

• returns expression2 if expression1 is truthy(anything other than a falsy value)
  Take a look at this example
  

// Case when the '&&' returns expression1
const number = 0 && 100
console.log(number) //0 because number1 i.e., expression1 was falsy and JavaScript never had a chance to execute expression2
---------------------------------------------------------------------------------------------------------------------------------
//Case when '&&' returns expression2
const heroes = 'IronMan' && 'CaptainAmerica'
console.log(heroes) //'CaptainAmerica' As string1 which is on the left hand side of the && operator is true, it has returned string2 from the right hand side.

|| operator

Syntax: expression1 || expression2

• returns expression1 if expression1 is truthy

• returns expression2 if expression1 is falsy
  Simple as that.
  Example:
  

//Case when expression1 is being returned
const heroes = 'IronMan' || 'CaptainAmerica'
console.log(heroes) // 'IronMan' because 'IronMan' is a truthy value
------------------------------------------------------------------------
//Case when expression2 is being returned
const number = 0 || 100
console.log(number) //100 because Number 0 is a falsy value

The '??' operator

In addition to the && and || there exists another operator called as the Nullish Coalescing Operator. This operator is moreover, like a special case of the logical OR operator and its operation is similar to that of the || operator.

As the || operator returns the right-hand side expression when the left hand side is falsy, the Nullish Coalescing operator ?? returns the right-hand side expression only when the left-hand side operand is either null or undefined. So, the ?? operator is more strict than the existing || operator.
Syntax: expression1 ?? expression2
The ?? operator returns expression2 only if expression1 is either null or undefined. Meanwhile, expression1 is returned if it is simply any value other than a nullish value.

//Case 1
const number = 0 ?? 100
console.log(number) //returns '0' because it is not nullish
------------------------------------------------------------
//Case 2
let fruit = ''
let veggie = 'Carrot'
const basket = fruit ?? veggie
console.log(basket) // '' because an empty string('') is not nullish but falsy
------------------------------------------------------------------------------------
//Case 3
let halves = 'fullPortion' / 2
let full = 1
const portion = halves ?? full
console.log(portion) // NaN. Obtained by the evaluation of the left hand side expression and it is not nullish but falsy.
----------------------------------------------------------------------------------------------------------------------------
//Case 4
let hero1
let hero2 = 'CaptainAmerica'
const heroes = hero1 ?? hero2
console.log(heroes) // 'CaptainAmerica' because 'hero1' is undefined

The ?? operator is designed in such a way that it cannot be used along with the && and || without proper brackets.

null || undefined ?? 'hi' // SyntaxError: missing ) after argument list

(null || undefined) ?? 'hi' //'hi'

But why them?

This question arises as soon as we see some unfamiliar syntax that makes some work. Can't we just stick with the classic if else statement to quantify expressions? Yes we can, but No. Let me explain why is that.
We can use if else conditions as long as we use plain JavaScript. But when it comes to using frontend UI libraries like ReactJs, it is impossible to embed 'if statements' within the JSX structure. We should use only expressions that use logical operators in this regard. Confused about expressions and statements? Scroll down to the bottom and you can find the relevant resource.

This is not the only use case. But these short circuit operators including the nullish coalescing operator avoids unnecessary execution of expressions with a single line of code.

You are open to construct a more complex logic using short-circuit operators as follows:

const gameConfig1 = { 
 playerName: 'John',
 score: 22500,
 highScore: 35000,
}
const gameConfig2 = { 
 playerName: undefined, 
 score: undefined,
 highScore: undefined
}
function getPlayerInfo( player ){
 const { playerName, score, highScore } = player
 const currentPlayerName= playerName ?? 'Guest'
 const currentPlayerScore = ( score >= 100 && score ) || 'No scores yet'
 const currentPlayerHighScore = highScore ?? 'No high scores yet'
 return { currentPlayerName, currentPlayerScore , currentPlayerHighScore }
}
const player1 = getPlayerInfo( gameConfig1 ) // { name: John, score: 22500, highScore: 35000 }
const player2 = getPlayerInfo( gameConfig2 ) // { name: 'Guest', score: 'No scores yet', highScore: 'No high scores yet' }

That's all about the Nullish coalescing operator. Practice more to get familiar with this operator. It may take some to do so, but it's worth the time you spend.
Following is the article distinguishing between Expression and Statement in JavaScript

Statement vs Expression – What's the Difference in Programming?

Learning the syntax of a programming language is key if you want to use that language effectively. This is true for both new and experienced developers. And one of the most important things to pay attention to while learning a programming language is whether the code you're dealing with is

freecodecamp.org

To know more about the nullish coalescing operator, refer to the following docs by MDN.

Nullish coalescing operator (??) - JavaScript | MDN

The nullish coalescing (??) operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

developer.mozilla.org