Unlock the Power of Nullish Coalescing Operator '??' for Smarter Code

Hey, Phenomenal people👋🏻

Hello everyone, my name is Aryan Sharma, and I hope you're all doing well. I'm thrilled to begin this JavaScript course for absolute beginners with my third blog post.

You can find my blogs here↗️

So, Let's dive!!

Definition:

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.

Have you understood?

The result of a ?? b is:

if a is defined, then a,
if a isn’t defined, then b.

Let code and get clear with it.

const name = null ?? 'Aryan Sharma';
console.log(name);
// Expected output: "Aryan Sharma"

const roll_no = 55 ?? 48;
console.log(roll_no );
// Expected output: 55

I hope you get it!

Comparison between ternary and Nullish operator

At this point, You should think about the ternary operator ? and how ?? is different from each other.

So, the Nullish operator is used to deal only null or undefined values.

Example -

Let's imagine that the firstName, lastname, or nickName variables provide information about a user. If the user chooses not to enter the appropriate values, then all of them may be undefined.

One of these variables should be used to display the user name, or "Anonymous" if none of them are present.

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// shows the first defined value:
alert(firstName ?? lastName ?? nickName ?? "Anonymous");

Comparison with ||

The OR || operator can be used in the same way as ??, as it was described in the previous chapter.

For example, in the code above we could replace ?? with || and still get the same result:

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

alert(firstName || lastName || nickName || "Anonymous"); // Supercoder

They are differentiated as:-

|| returns the first truthy value.
?? returns the first defined value.

In other words

|| OR check for falsy values.
&& AND checks for null and undefined values only.

For example:

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

The height || 100 checks height for being a falsy value, and it’s 0, falsy indeed.
- so the result of || is the second argument, 100.
The height ?? 100 checks height for being null/undefined, and it’s not,
- so the result is height “as is”, that is 0.

Compare Precedence Order

The ?? the operator is the same as || in precedence.

It means that the nullish coalescing operator?? is evaluated after most other operations, such as +, *, but before = and ? exactly like ||.

Therefore, brackets may be necessary in expressions like these:

let height = null;
let width = null;

// important: use parentheses
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

Using ?? together with && or ||

JavaScript forbids using ?? together with && and || operators, because it generates syntax errors.

let x = 1 && 2 ?? 3; // error

The limitation is surely debatable, it was added to the language specification with the purpose to avoid programming mistakes when people start to switch from || to ??.

Use explicit parentheses to work around it:

let x = (1 && 2) ?? 3; // Works

alert(x); // 2

I Hope you loved the blog❣️

See u in the next blog...Stay tuned🎶

Don't forget to follow me on:
Twitter LinkedIn

Nullish coalescing operator '??'