Kent C. Dodds’ .filter() Trick Will Change How You Use JavaScript

This one-liner uses the Boolean constructor to magically remove all falsy values from an array ✨

I wanted to share a trick I picked up a few years ago from señor Kent C. Dodds, the “Epic React” and “Testing JavaScript” guy.

Did you find that example kind of convoluted? No worries, let’s break it down real quick, and then I’ll share why I filter Boolean values.

What does falsy mean in JavaScript?

In JavaScript, falsy values are those values like null and >-0 that evaluate to false when using >== (loose equality). All other values, including objects such as arrays and Dates, are considered truthy.

You can use the Boolean constructor (Boolean()) to “coerce” a value to either true or false, which are the Boolean primitive types.

It’s important to note that you don’t use the new keyword, like you would if you were creating a new Set object. In this case, you’re using Boolean() for type coercion, not to create an “object-wrapped primitive.”

Object-wrapped primitives are what happens if you were to accidentally use the new keyword in this situation, something I discussed here:

How to remove falsy array items in JS

The one-liner we saw in Kent’s tweet is [].filter(Boolean). Clear as mud, right? Let’s look at another code example:

To remove falsy items, we use .filter() (Array.prototype.filter()), which returns a new array containing just the array items for which the function passed in to .filter() evaluated to true.

The JavaScript interview question here is: Please explain why you can abbreviate .filter(item=>Boolean(item)) to .filter(Boolean).

Answer: The first argument to .filter() is a callback function, so you can pass in any existing function instead of making a new one.

In this case, Boolean and (item)=>Boolean(item) are the same callback function. (You can always try it in the console to be sure.)

How I actually filter out falsy array values

I had never actually figured out a great reason to use .filter(Boolean) in production until I was working on string matching this week.

String matching feels a little convoluted in JavaScript, because the regular expression comes first, followed by .exec(), then the string.

The .exec() (RegExp.prototype.exec()) method will return an array if a match is found or null if no match was found.

Since arrays are truthy, we can use .filter(Boolean) to generate an array of match results from an array of strings without any null values.

This is TypeScript code from a Next.js project I’m working on that searches for Markdown (.md or .mdx) files to generate dynamic routes.

Any strings that don’t match data\\[path]\\[slug].md will be turned into null by .exec() in the .map() (Array.prototype.map()) call.

While we could imagine many different .filter() conditions would work, this particular use of .filter(Boolean) makes a lot of sense to me.

Happy coding! 🥞🎭😎🚡💌

Dr. Derek Austin is the author of Career Programming: How You Can Become a Successful 6-Figure Programmer in 6 Months, now available on Amazon.