Subscribe to πŸ’Œ Tiny Improvements, my weekly newsletter for product builders. It's a single, tiny idea to help you build better products.

JavaScript Tips: Using Array.filter(Boolean)

If you come across array.filter(Boolean) in JavaScript code, never fear! It's a handy bit of functional programming that cleans up arrays with null and undefined values in them.

What does .filter(Boolean) do on Arrays?

This is a pattern I've been coming across quite a bit lately in JavaScript code, and can be extremely helpful once you understand what's going on. In short, it's a bit of functional programming which is used to remove null and undefined values from an array.

1
const values = [1, 2, 3, 4, null, 5, 6, 7, undefined];
2
3
console.log(values.length);
4
// Output: 9
5
6
console.log(values.filter(Boolean).length);
7
// Output: 7
8
9
// note that this does not mutate the value original array
10
console.log(values.length);
11
// Output: 9

How does the Boolean part of .filter(Boolean) work?

We're using a function built into arrays in JavaScript, called Array.prototype.filter, which creates a new array containing all elements that pass the check within the function it takes as an argument. In this case, we're using the JavaScript Boolean object wrapper's constructor as that testing function.

Boolean is a helper class in JavaScript which can be used to test whether a given value or expression evaluates to true or false. There's a subtle, but really important point here - Boolean() follows the JavaScript rules of truthiness. That means that the output Boolean() might not always be what you imagine.

In this context, passing Boolean to .filter is effectively shorthand for doing this:

1
array.filter((item) => {
2
return Boolean(item);
3
});

which is also approximately the same as

1
array.filter((item) => {
2
return !!item; // evaluate whether item is truthy
3
});

or, simplified

1
array.filter((item) => !!item);

I suspect that you may have seen at least one of these variations before. In the end, array.filter(Boolean) is just shorthand for any of the other options above. It's the kind of thing that can cause even seasoned programmers to recoil in horror the first time they see it. Near as I can tell, though, it's a perfectly fine replacement.

Examples of Boolean evaluating for truthiness

1
// straightforward boolean
2
Boolean(true); // true
3
Boolean(false); // false
4
5
// null/undefined
6
Boolean(null); // false
7
Boolean(undefined); // false
8
9
// hmm...
10
Boolean(NaN); // false
11
Boolean(0); // false
12
Boolean(-0); // false
13
Boolean(-1); // true
14
15
// empty strings vs blank strings
16
Boolean(''); // false
17
Boolean(' '); // true
18
19
// empty objects
20
Boolean([]); // true
21
Boolean({}); // true
22
23
// Date is just an object
24
Boolean(new Date()); // true
25
26
// oh god
27
Boolean('false'); // true
28
Boolean('Or any string, really'); // true
29
Boolean('The blog of Mike Bifulco'); // true

Warning: Be careful with the truth(y)

So - someArray.filter(Boolean) is really helpful for removing null and undefined values, but it's important to bear in mind that there are quite a few confusing cases above... this trick will remove items with a value of 0 from your array! That can be a significant difference for interfaces where displaying a 0 is perfectly fine.

**EDIT: ** Hi, Mike from The Futureℒ️ here - I've edited the next paragraph to reflect the actual truth... I had confused -1 with false from my days as a BASIC programmer, where we'd sometimes create infinite loops with while (-1)... but even that means "while true"!

I also want to call some attention to cases that evaluate to -1. for many programmers, -1 is synonymous with false, because that is absolutely the case in many langauges... but not here. The -1 case can also be unintuitive if you're not expecting it, but true to form, in JavaScript, -1 is a truthy value!

Array.filter(Boolean) For React Developers

I tend to come across this pattern being used fairly often for iterating over collections in React, to clean up an input array which may have had results removed from it upstream for some reason. This protects you from scary errors like Can't read property foo of undefined or Can't read property bar of null:

1
2
const people = [
3
{
4
name: 'Mike Bifulco',
5
email: 'hello@mikebifulco.com',
6
},
7
null,
8
null,
9
null,
10
{
11
name: "Jimi Hendrix",
12
email: 'jimi@heyjimihimi@guitarsolo',
13
}
14
]
15
16
// display a list of people
17
const PeopleList = ({people}) => {
18
return (
19
<ul>
20
{people.map(person) => {
21
// this will crash if there's a null/undefined in the list!
22
return (
23
<li>{person.name}: {person.email}</li>
24
);
25
}}
26
</ul>
27
);
28
}
29
30
// a safer implementation
31
const SaferPeopleList = ({people}) => {
32
return (
33
<ul>
34
{people
35
.filter(Boolean) // this _one weird trick!_
36
.map(person) => {
37
return (
38
<li>{person.name}: {person.email}</li>
39
);
40
}
41
}
42
</ul>
43
);
44
}

Functional Programming reminder

Like I mentioned above, this is a handy bit of functional programming -- as is the case with nearly all clever bits of functional programming, it's important to remember that we're not mutating any arrays here - we are creating new ones. Let's show what that means in a quick example:

1
const myPets = [
2
'Leo',
3
'Hamilton',
4
null,
5
'Jet',
6
'Pepper',
7
'Otis',
8
undefined,
9
'Iona',
10
];
11
12
console.log(myPets.length); // 8
13
14
myPets
15
.filter(Boolean) // filter null and undefined
16
.forEach((pet) => {
17
console.log(pet); // prints all pet names once, no null or undefined present
18
});
19
20
console.log(myPets.length); // still 8! filter _does not mutate the original array_

Wrapping up

Hopefully this has helped to demystify this little code pattern a bit. What do you think? Is this something you'll use in your projects? Are there dangers/tricks/cases I didn't consider here?

Tell me all about it on twitter @irreverentmike. Thanks for reading!

note: Cover photo for this article is from Pawel Czerwinski on Unsplash

***

SHIP PRODUCTS
THAT MATTER

πŸ’Œ Tiny Improvements: my weekly newsletter sharing one small yet impactful idea for product builders, startup founders, and indiehackers.

It's your cheat code for building products your customers will love. Learn from the CTO of a Y Combinator-backed startup, with past experience at Google, Stripe, and Microsoft.

    Join the other product builders, and start shipping today!