DEV Community

Cover image for Filtering Arrays Like A Pro
Anurag Hazra
Anurag Hazra

Posted on • Updated on • Originally published at

Filtering Arrays Like A Pro

This post was originally published in my site

Filtering arrays is the most common thing you might do as a javascript developer, and I know it can be sometimes messy
when filtering out primitive data-types or removing arrays or objects from an array, but I will show you some cool
tricks which I found while experimenting with js, let's get started

To filter arrays like a PRO we will use Array.prototype.filter() method.

let me tell you that these are just hacks I found, and I don't know if they are a good use case for production apps.

Removing falsy values

Removing falsy values from an array is much simpler with this simple little trick.

const arr = [undefined, null, 0, '', 'str', 2.5, 2, { a: 1 }, []];
// -> ["str", 2.5, 2, { a: 1 }, []]
Enter fullscreen mode Exit fullscreen mode

Filtering Numbers

Using the isFinite function, we can filter numbers from the array.

const arr = [undefined, null, 'str', 0, 1, 1.5, -2, 5, {}, []];
// -> [null, 0, 1, 1.5, -2, 5]
Enter fullscreen mode Exit fullscreen mode

Now here comes the javascript's weirdness, if you use the global isFinite method then the array contains the null value as well, but if you use Number.isFinite then it will exclude the null.

Now you would say why this? can't we just do filter(i => typeof i === 'number')?

YES! We can, but that's not the main reason you are here, you are here because you wanted to know some tricks, right?

Filtering Safe Integers

By passing Number.isSafeInteger, we can filter the safe integers from the array.

Note that, Number.isSafeInteger also removes floating-point numbers and numbers which are greater than

const arr = [null, 's', {}, 0, 1, 1.5, -2, 1, Number.MAX_SAFE_INTEGER + 1];
// -> [0, 1, -2, 5]
Enter fullscreen mode Exit fullscreen mode

Filtering NaN

With isNaN function, we can filter out all the Numbers from the array, and we ended up only with other elements.

that null is a special case

const arr = [undefined, null, 0, 's', 1.1, 50, { a: 'b' }, [1, 2]];
// -> [undefined, 's', { a: 'b' }, [1, 2]]
Enter fullscreen mode Exit fullscreen mode

Since isNaN([1]) is false doing like so:

[[1], [2, 3]].filter(isNaN);
// -> [[2, 3]]
Enter fullscreen mode Exit fullscreen mode

will return [[2, 3]]

Methods you can also try:

  • parseFloat()
  • parseInt()

Filter Only Arrays

With Array.isArray method, we can extract just the arrays from the array. (that's mouthful 😂)

const arr = [undefined, null, 0, 'str', 1, { a: 'b' }, [5, 6], [{ a: 5 }]];
// -> [[5,6], [{a: 5}]]
Enter fullscreen mode Exit fullscreen mode

Filtering Objects, Arrays, Functions, Classes

This one is maybe a bit unique than other methods. The Object.isExtensible() method determines if an object is
extensible (whether it can have new properties added to it).

And with this, we can filter elements like Arrays, Objects, Functions, Classes which are extensible.

const MyFunc = () => {};
class MyClass {}

const arr = [null, 0, 'str', 1.5, 5, { a: 'b' }, [1], MyFunc, MyClass];
// -> [{a: "b"}, [1], () => {}, class MyClass]
Enter fullscreen mode Exit fullscreen mode

Methods you can also try:

And I'm going to wrap things up here. I hope you enjoyed these cool little filtering tricks and maybe learned a thing or two.

Now, as I said earlier, these are just tricks and hacks you can use to make your life easier as a developer, but I don't think it's a good idea to use them in a real-world situation where it (maybe) can break.

Whatever, hope you like this, and now you are also a PRO at filtering arrays! 😉.

And Don't forget to comment down your favorite array tricks and tips and let me know your thought's about these tricks.

Cover Image by nate_dumlao

Top comments (6)

dbanisimov profile image
Denis Anisimov

As a coffee snob I'm perplexed by the cover photo 😧

monfernape profile image
Usman Khalil • Edited

Wow. They are some really cool things. May be weird too

franky47 profile image
François Best

I agree with the weird part. Some of these tricks might look clever, but your future self/colleague/contributor/whoever reads this code in the near/far future may not know the trick, or have forgotten about it, and this will not look professional.

Want to filter like a pro? Write simple code.

anuraghazra profile image
Anurag Hazra

Yes, they are little bit weird too.

mkrl profile image
Mikhail Korolev • Edited

Nice article. But why on earth would you pour over your coffee three times? That image grinds my gears.

anuraghazra profile image
Anurag Hazra

😂 haha.. Lol