Web Tools #451 - CSS Tools, Databases, JSON, SVG

CSS Tools, Databases, JSON, SVG

Issue #451 • March 10, 2022

There are a number of different ways to remove empty items from an array in JavaScript. But in each case, you'll have to first determine what constitutes "empty". Is it only blank array slots you're concerned about? What about slots that include null, false, undefined, or 0?

I've talked before about ways to remove falsy values from an array, so that will also be covered here again. But removing blank values alone is something more specific, but there are a few ways to do it.

Let's work with the following array:

Notice the array includes two empty slots along with two falsy values. Following are some options for removing the empty slots.

Array.filter(Boolean) will remove all falsy values, including the empty slots:

If you want to preserve the falsy values but remove the empty slots, and you know the array only contains strings, you could try this:

Interestingly, you would expect this to remove any number values from the array, but that doesn't seem to happen. So I'm not entirely sure why the String object (used here as a function acting on the values) doesn't filter out numbers too. Similarly, using Number as the passed in function would remove all values except numbers, so that seems to work as expected.

Another technique that has the same effect as the Boolean example is using a simple function that passes and returns each of the values:

This again eliminates all falsy values, including blanks.

Finally, here's one that you may not have seen before:

Credit to Ravin for this one. Normally Array.flat() is used to flatten an array that contains one or more sub-arrays. But, for whatever reason, this also eliminates all blank values while keeping the falsy values. As the discussion on Twitter mentions, this is not ideal because you may end up inadvertently flattening an array that you didn't realize was multi-dimensional.

Let me know if you know of another way to do this, but that should give you enough options depending on the circumstances. You can find all the above examples in this CodePen.

Now on to this week's tools!