!!null = false: How to evaluate any expression to a boolean

Here is a quick trick that I've been enjoying quite a bit. I'll start with this expression as an example of the problem:

if (x !== undefined && x !== null && x !== "" && x !== 0) {
  // do something
}

If you've spent any time with JavaScript, and especially with React, you will probably have written something similar to this. Being a loosely typed language, it's often necessary to check for multiple 'falsey' types to avoid errors.

There's nothing inherently wrong with it, but it's quite wordy. In my opinion, long expressions like this make it harder to parse through a file and understand what's going on. I'm a big advocate for making code as human-readable as possible, so using multiple lines to express just one thing is a big no-no for me.

However, there is a better option!

A while ago I discovered that alongside being able to invert an expression using the NOT ! operator, it's also possible to chain more than one of these together. This means you can evaluate any variable or expression to a boolean, so you can check if something exists using just 2 characters even if that thing could appear as multiple types.

Here's an example in React:

{!!props.heading && (
  <h2>{ props.heading }</h2>
)}

In this scenario, props.heading could appear as undefined or null, OR it could appear as an empty string "".

The main problem this trick solves is that null doesn't actually evaluate to false on it's own: it's a unique and slightly irritating type that can cause all sorts of problems in JavaScript. Using the double NOT operator !! fixes this issue and avoids the need for additional expressions to check for other falsey cases.

// this wordy expression
(x !== undefined && x !== null && x !== "" && x !== 0)

// can be reduced down to this!
!!x

It's also, in my opinion, much easier to read. If I see two exclamation marks before a variable or expression, I know it's definitely checking if the variable exists. I prefer this over simply writing, { props.heading && (<>...</>) } because with the latter example props.heading could be null, which doesn't immediately evaluate to false, or the string could be empty, which doesn't evaluate to false either. This extra step ensures the data is actually useful for something before moving on while communicating to the developer that this is the intention of the expression.

// null exists in a world of its own

null === false // false
null === true // false

'' === false // false

When to avoid the double NOT operator

As useful as this little trick is, you should avoid it when working with numbers. This is because the number 0 is inherently falsey. If you're checking if the number exists, and it does exist but the number is 0, it will think that the number doesn't exist. This might be what you want in some situations, but it's good to be aware of.