!!null = false: How to evaluate any expression to a boolean
Tags: webdev, javascript, react, css
Published: 2021-11-01 20:04:30

<!-- wp:paragraph -->
<p>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:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>if (x !== undefined &amp;&amp; x !== null &amp;&amp; x !== "" &amp;&amp; x !== 0) {
  // do something
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>If you've spent any time with JavaScript, and especially with React, you will probably have written something similar to this. Being a <a href="https://flaviocopes.com/loosely-strongly-typed/" data-type="URL" data-id="https://flaviocopes.com/loosely-strongly-typed/" target="_blank" rel="noreferrer noopener">loosely typed</a> language, it's often necessary to check for multiple 'falsey' types to avoid errors. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, there is a better option!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A while ago I discovered that alongside being able to invert an expression using the <code>NOT</code> <code>!</code> 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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's an example in React:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>{!!props.heading &amp;&amp; (
  &lt;h2>{ props.heading }&lt;/h2>
)}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In this scenario, props.heading could appear as <code>undefined</code> or <code>null</code>, OR it could appear as an empty string <code>""</code>.</p>
<!-- /wp:paragraph -->

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

<!-- wp:code -->
<pre class="wp-block-code"><code><meta http-equiv="content-type" content="text/html; charset=utf-8">// this wordy expression
(x !== undefined &amp;&amp; x !== null &amp;&amp; x !== "" &amp;&amp; x !== 0)

// can be reduced down to this!
!!x</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>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, <code>{ props.heading &amp;&amp; (&lt;>...&lt;/>) }</code> because with the latter example props.heading could be <code>null</code>, which doesn't immediately evaluate to <code>false</code>, or the string could be empty, which doesn't evaluate to <code>false</code> 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.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>// null exists in a world of its own

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

'' === false // false</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>When to avoid the double NOT operator</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As useful as this little trick is, you should avoid it when working with numbers. This is because the number <code>0</code> is inherently falsey. If you're checking if the number exists, and it does exist but the number is <code>0</code>, 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. </p>
<!-- /wp:paragraph -->