Redefine your Logic for stricter, safer JavaScript defaults with the '??' operator
Tags: webdev, javascript, 100daysofcode, beginners
Published: 2023-12-10 15:48:46

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
```
<u>So, what is considered nullish in JavaScript?</u>. 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
{% embed https://www.freecodecamp.org/news/statement-vs-expression-whats-the-difference-in-programming/#:~:text=The%20Main%20Differences%20Between%20an,values%20or%20execute%20to%20values. %}
To know more about the nullish coalescing operator, refer to the following docs by MDN.
{% embed https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing#syntax %}