Redefine your Logic for stricter, safer JavaScript defaults with the '??' operator
Subaash
Posted on December 10, 2023
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
To know more about the nullish coalescing operator, refer to the following docs by MDN.
Posted on December 10, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
December 10, 2023