Nullish Coalescing in JS

In the world of JavaScript, handling data with assigned or unassigned values is an everyday task. It is essential to manage nullish and falsy values properly to avoid any runtime errors.

But before jumping directly into nullish coalescing, let's first explore the difference between nullish and falsy values -

Hopefully, you get an idea from this image.

Nullish Coalescing

Let's consider a scenario where you have a student data object that contains information about their names and scores, as shown below:

const obj = {
  student1: {
    name: "Tom",
    score: 92,
  },
  student2: {
    name: "John",
    score: 0,
  },
  student3: {
    name: "Harry",
    score: null,
  }
};

Now, we want to store each student's score in a variable and display the output based on the score. As you can see, John scored "0" marks, and Harry didn't even attempt the test. In such cases as Harry, it would be better to display "Not Attempted" instead of a zero.

Initially, you may have written the code to check the score property of each student object and display the score or 'Not Attempted' accordingly as given below:

for (const key in obj) {
  const score = obj[key].score;
  if (score) {
      console.log(score);
  } else {
      console.log("Not Attempted");
  }
}

Now you think this program can be lengthy and challenging to read and maintain. To make the code more concise and readable, you applied shorthand notations inside the for loop such as:

const score = obj[key].score;
console.log(score || "Not Attempted");

Unfortunately, these approaches have a flaw if you observe them. They display "Not Attempted" in the case of John as well even if the score is zero, which may not be desirable. To avoid this issue, you come up with modified logic this time, as shown below:

const score = obj[key].score;
if (score == undefined && score == null) {
  console.log("Not Attempted");
} else {
  console.log(score);
}

This code works fine, but it is still not very concise and can be hard to read, especially if you need to use it frequently in your code.

Here comes the "nullish coalescing operator" to save the day. This operator provides a more concise and readable way to choose a default value when a variable is null or undefined. You can use the ?? operator to express the same logic in a shorter and more readable way, as shown below:

const score = obj[key].score;
console.log(score ?? "Not Attempted");

We will get the desired output from this code that is:

92
0
Not Attempted

Conclusion:

The nullish coalescing operator(??) provides a more concise and readable way to choose a default value when a variable is null or undefined and not for the falsy variables. By using the ?? operator, you can express the same logic in a shorter and more readable way, thus making your code more efficient and maintainable.

Keep learning, and keep coding.🌻

Nullish Coalescing: A Better Way to Handle JavaScript's Falsy Values

Nullish Coalescing

Conclusion: