How to do your null-checks safely in JavaScript

Content team
Dec 13, 2021
2
min read

Learn safe ways to check for null and undefined in JavaScript, using concise methods like val == null, while avoiding common pitfalls and ESLint issues.

Checking if the value is null or undefined in JavaScript (and TypeScript) can be a real headache and doing it incorrectly can lead to unexpected errors during runtime.  In most strongly typed languages the value can be either null or not, however that’s unfortunately not the case in JavaScript.  

In JavaScript, you will encounter null or undefined. To make life even harder, there are also double (abstract ==) and triple (strict ===) equality comparisons which combined with null/undefined confusion can be a challenge, especially for beginners.  

Let’s start with a little theory, and later I’ll guide you through examples and finally show you a painless (and safe!) way to do the null checks in the code. 

Equality comparison 

There are three value-comparisons in operations in JavaScript: 

  • == Abstract Equality Comparison (“loose equality”, “double equals”) 

It compares the value of equality only. Before checking the values. it converts the types to match each other.  

  • === Strict Equality Comparison (“strict equality”, “identity”, “triple equals”) 

It doesn’t convert the types before performing the comparison, which means that it’s type-sensitive.  

  • Object.is provides SameValue (new in ES2015). 

It checks if two values are the same. Unlike double equals, Object.is doesn't coerce either value. It differs from triple equals with the way it treats signed zeros and NaNs.  

Now, let’s see the examples that explain the above.

equality comparison in javascript
equality comparison in java script

Real-world example

Let’s jump into real-world examples. Very often we have to check if the value is null or undefined before we perform any further operations. The usual (and correct) way to do it is:

null checks in java script real life example

It’s correct, but it’s also long, so people very often shorten it to

null checks in java script real life example
And here comes the trap. If val is an object, we should be safe. But what if val is a nullable numeric value?
null checks in java script real life example

In such a scenario, the expression will resolve to true, even though value isn’t null or undefined (which is what we probably intended to check in the first place).

So what should we do to avoid the tedious (val === null || val === undefined) check?

We can take advantage of the double-equals and the fact, that (null == undefined) is true.

null checks in java script real life example

Now you might ask – what about ESLint? It’s used in the modern projects and it enforces triple-equals. Here I might surprise you – ESLint’s rule eqeqeq [2], can be configured to allow double-equality null checks ("eqeqeq": ["error", "always", {"null": "ignore"}])

Summary

While checking for both undefined and null with a triple-equality check is correct, it is also long, so often developers tend to change it to !val check instead, which can lead to bugs in some scenarios. Changing it to a double-equality check makes it simpler and defers the 0 edge case scenarios.

References

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
  2. https://eslint.org/docs/rules/eqeqeq
Content team
Industry experts at Synergy Codes

A team of authors and subject matter experts (SMEs), including former employees, who played an active role in content creation.

Get more from me on:
Share:

Articles you might be interested in

10 tips for better initial configuration of full-stack apps

Follow these tips for configuring full-stack apps, from using a monorepo with Nx to setting up code formatting and CI/CD pipelines, ensuring smooth development.

Tomasz Świstak
Aug 12, 2022

Effective front-end development with GoJS

Learn how GoJS enhances front-end development by creating interactive diagrams with flexibility and performance for complex data visualizations.

Content team
Oct 1, 2021

Angular vs. React: Which technology is more efficient?

Compare the performance of Angular and React in large apps, focusing on memory usage and optimization needs. Learn when to choose each in the upcoming webinar.

Kacper Cierzniewski
Aug 4, 2021