Modern Javascript -- Nullish coalescing operator (??)

In this short article, I will talk about another handy JavaScript trick that I came across recently known as Nullish coalescing operator (??). This operator was released as a part of ECMAScript 2020 Language Specification.

Hello 👋, I'm Akash from India. I work as a frontend developer at Classcard. For us to understand this better, I will explain a use case where Nullish coalescing operator can be used. But before that let us first understand what Nullish coalescing operator does.

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. This is similar to logical OR (||) operator, the difference is that logical OR will return its right-hand side operand when its left-hand side operator is false. In javascript even 0 and empty strings are considered to be false. This is where nullish coalescing operator (??) shines.

let logicalValue = 0 || 'right hand side'; // logicalValue will contain 'right hand side' now because  0 is falsy in javascript
let nullishValue = 0 ?? 'right hand side'; // logicalValue will contain 0 now because nullish coalescing operator only works on null or undefined

console.log("logicalValue: ", logicalValue); // right hand side
console.log("nullishValue: ", nullishValue); // 0

You can also use nullish coalescing operator (??) on functions in order to evaluate the second function only when the first function returns null or undefined.

const firstFunction = () => {
  return null;
};
const secondFunction = () => {
  return "I'm second function";
};

console.log(firstFunction() ?? secondFunction()) // I'm second function

const firstFunction = () => {
  return true;
};
const secondFunction = () => {
  return "I'm second function";
};

console.log(firstFunction() ?? secondFunction()) // true

Now let's add console.log's to both the functions to see how they are evaluated.

const firstFunction = () => {
    console.log("First function running.")
  return null;
};
const secondFunction = () => {
    console.log("Second function running.")
  return "I'm second function";
};

firstFunction() ?? secondFunction()

/**
 * Console
 * 
 * First function running.
 * I'm second function
 */

const firstFunction = () => {
    console.log("First functionrunning.")
  return true;
};
const secondFunction = () => {
    console.log("Second function running.")
  return "I'm second function";
};

firstFunction() ?? secondFunction()

/**
 * Console
 * 
 * First function running.
 */

As we can see in the above example, the second function will only run when the first function fails, this can be used in a lot of places in our day to day code to improve redundancy while still keeping the code clean.

Please let me know in the comments if you have any doubts or corrections. Subscribe to my newsletter and follow if you are interested in frontend development content like this. I write weekly, hope to see you in my next article. I'd like to end this article by talking a little bit about the company I work for, Thank you.

Classcard helps organize class schedules, collect inquiries, mark attendance, grade assessments, share files, and relay personalized feedback. It also makes selling classes online easy with an instant ‘online booking page’. Class providers have had to transition to online classes or at least facilitate online booking for their (socially distant) classes. Classcard fits into the way educators already work - it integrates with video meeting platforms like Zoom. There’s also a student side app, where students are reminded of their classes. Students can also see teacher comments and track progress visually. If this sounds interesting to you, check us out at classcardapp.com

Ps. We also have a generous free plan and you can also book a demo with us at classcardapp.com/request-demo