JavaScript Quick Tip: Quickly Filter Out All Falsy Values From An Array

How to filter out falsy values from a JavaScript array effectively

Working with arrays in a functional way has mostly become the default when working with JavaScript these days. Why should you use a traditional imperative loop, like for, for..of, while, do..while, etc., when you can use map, filter, and forEach?



Functional methods have one caveat, though: You can never throw from them without aborting the whole pipeline.

someArray.map((value) => {
  if (someConditionMet) {
    throw new Error('...'); // this is not the best idea...
  }
  // ...
  return someValidValue;
});

So what do you do then? Well, you can return null to mark that you have an invalid result.

someArray.map((value) => {
  if (someConditionMet) {
    return null; // now the pipeline can continue
  }
  // ...
  return someValidValue;
});

That’s fine. If you don’t want your pipeline to abort, you can continue using null values as a marker for “this didn’t work out”.

But what if you want to get rid of those values afterward? Perhaps something like this?

someArray.map((value) => {
  if (someConditionMet) {
    return null; // now the pipeline can continue
  }
  // ...
  return someValidValue;
}).filter((value) => value);

This leaves you only with valid values, which is perfectly fine, but we can make this even shorter.


The Code

JavaScript has first-class functions. You can pass any function reference to any other function that expects a function as this particular argument. And the Boolean constructor is actually the function responsible to define truthy and falsy.

const array = [1, null, undefined, 0, 2, "", 4];
const result = array.filter(Boolean);

When the filter step of this pipeline has run, you only have all truth values left, and can continue working with them without having to handle special cases like null or undefined.


The Whole Tip As An Image

If you like visual content more, or if you want to store it for later, I put all this into one image for you. I hope you like it!

A picture showcasing the above code

Before You Leave

If you would love to read even more content like this, feel free to visit me on Twitter or LinkedIn.

I’d love to count you as my ever-growing group of awesome friends!

Oliver Jumpertz

Contact

Feel free to contact me

Contact Me

Connect

Subscribe

Join the Newsletter

You will regularly be informed about new content, special offers, and interesting information about software development.

Your data might be transferred to servers located in the USA. By subscribing, you agree to the data transfer. You can revoke your approval at any time by unsubscribing. For more information, please visit the privacy policy.

    We won't send you spam. Unsubscribe at any time.