Nullish Coalescing Operator [??] 💥

Before discussion about the Nullish coalescing operator in JavaScript, let me tell you the journey How I came up with an idea to explore about this topic. By the word nullish itself made me ignore this concept in doubt whether to spent time on learning and understanding this topic. Because as I discussed about it with few of my friends we were unable to explain it to each other even after sparing an hour exploring about Nullish coalesing. I hope this article will be a quite helpful for you to pick up some pin points about it.

I hope you will enjoy reading it.

So, let's dive deep into it with an intro about nullish coalescing operator ?? is just an double question mark together, which often breaks the mind of future Faddu Software Engineer.

What is Nullish Coalescing Operator ?? ?

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.

~ MDN Web Docs

Matlab ki :

It always checks the lefthand expression regardless to righthand operator what it holds, leftExpression always check for null and undefined if the value in leftExpression does not contain either of it then moves ahead displaying the leftHand Expression.

In JavaScript it is regarded as the feature which is recently introduced in ECMAScript 2020. It is quite similar to the logical operator OR operator || but has the specific purpose. That allows developers to check for the existence of a value before assigning a default value.

Look into the code in the example below :

Syntax :

leftExpression ?? rightExpression

Code Example using || Operator

// Example 1
const meraName = 'Santos' || 'Nai Malum';
console.log(meraName);
// Expected Answer : 'Santos'

//-------------------------------------------------------

// Example 2
const teraNam = 'Mango' || undefined;
console.log(teraNam);
// Expected Answer : 'Mango'

//-------------------------------------------------------

// Example 3
const meraNam = 'Santos' || null;
console.log(meraNam);
// Expected Answer : Santos

//-------------------------------------------------------

// Example 4

const meraNam = null || 'Santos';
console.log(meraNam);
// Expected Answer : 'Santos'

//-------------------------------------------------------

// Example 5
const meraNam = null || undefined;
console.log(meraNam);
// Expected Output : undefined

//-------------------------------------------------------

// Example 6
const meraNam = undefined || null;
console.log(meraNam);
// Expected answer : null

//-------------------------------------------------------
// Example 7
const operaFun = (num) => {
    const ans = (null || undefined) || 'iMHappy';
  console.log(ans);
}

operaFun(null);
// Expected Answer : 'iMHappy'

//-------------------------------------------------------
// Example 8
const operaFun = (num) => {
    const ans = num || 'iMHappy';
  console.log(ans);
}

operaFun('');

// Expected Answer : 'iMHappy'

Examples we have seen above are exactly what we intend to get and it works perfectly fine with OR || Operator. But using this logical operator to get a value or fallback works 90% of the time and the other 10% is actually when you hit false values.

Let us also explore the nullish coalescing Operator with Examples and see the differences among || and ?? Operators

 // Example 1
const meraName = 'Santos' ?? 'Nai Malum';
console.log(meraName);
// Expected Answer : 'Santos'

//-------------------------------------------------------

// Example 2
const teraNam = 'Mango' ?? undefined;
console.log(teraNam);
// Expected Answer : 'Mango'

//-------------------------------------------------------

// Example 3
const meraNam = 'Santos' ?? null;
console.log(meraNam);
// Expected Answer : Santos

//-------------------------------------------------------

// Example 4

const meraNam = null ?? 'Santos';
console.log(meraNam);
// Expected Answer : 'Santos'

//-------------------------------------------------------

// Example 5
const meraNam = null ?? undefined;
console.log(meraNam);
// Expected Output : undefined

//-------------------------------------------------------

// Example 6
const meraNam = undefined ?? null;
console.log(meraNam);
// Expected answer : null

//-------------------------------------------------------

// Example 7
const operaFun = (num) => {
    const ans = (null || undefined) ?? 'iMHappy';
  console.log(ans);
}

operaFun(null);
// Expected Answer : 'iMHappy'

//-------------------------------------------------------
// Example 8
const operaFun = (num) => {
    const ans = num ?? 'iMHappy';
  console.log(ans);
}

operaFun('');
// Expected Answer : ''

Nullish coalescing operator has the lower operator precendence than || and is higher than the other conditional or ternary operators. As we have already seen both the examples from example 1 to example 8 from the section, you will be able to notice the change and difference it occurs. This should be sufficient to stop here.

If you still feel like exploring more about it then, let's not stop here but move forward.

Nullish Operator only checks for the two keywords and they are null and undefined beside this it will always move to the rightExpression and display the output or hold the value.

Therefore, the main differences between this two operators is subtle but important.

// Using OR Operator (||)
const operaFun = (num) => {
    const ans = num || 'iMHappy';
  console.log(ans);
}

operaFun('');
// Expected Answer : 'iMHappy'

// Using Nullish Coalescing Operator (??)
const operaFun = (num) => {
    const ans = num ?? 'iMHappy';
  console.log(ans);
}

operaFun('');
// Expected Answer : ''

And there the need of Nullish Coalescing Operator concept was introduced by the ECMAScript 2020 and provided us the advanced feature.

Drop 💖in comment , if you really appreciate this articles, your appreciation would stimulate my dopamine to write more of such content for you.....!!!