{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/filtering-arrays-like-a-pro","result":{"data":{"markdownRemark":{"excerpt":"Filtering arrays is the most common thing you might do as a javascript developer, and I know it can be sometimes messy\nwhen filtering out…","html":"

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

\n

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

\n
\n

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.

\n
\n

Removing falsy values

\n

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

\n
const arr = [undefined, null, 0, '', 'str', 2.5, 2, { a: 1 }, []];\narr.filter(Boolean);\n// -> [\"str\", 2.5, 2, { a: 1 }, []]
\n

Filtering Numbers

\n

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

\n
const arr = [undefined, null, 'str', 0, 1, 1.5, -2, 5, {}, []];\narr.filter(isFinite);\n// -> [null, 0, 1, 1.5, -2, 5]
\n

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.

\n
\n

Now you would say why this? can't we just do filter(i => typeof i === 'number')?
\nYES! We can, but that's not the main reason you are here, you are here because you wanted to know some tricks, right?

\n
\n

Filtering Safe Integers

\n

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

\n

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

\n
const arr = [null, 's', {}, 0, 1, 1.5, -2, 1, Number.MAX_SAFE_INTEGER + 1];\narr.filter(Number.isSafeInteger);\n// -> [0, 1, -2, 1]
\n

Filtering NaN

\n

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

\n

Note:\nthat null is a special case

\n
const arr = [undefined, null, 0, 's', 1.1, 50, { a: 'b' }, [1, 2]];\narr.filter(isNaN);\n// -> [undefined, 's', { a: 'b' }, [1, 2]]
\n

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

\n
[[1], [2, 3]].filter(isNaN);\n// -> [[2, 3]]
\n

will return [[2, 3]]

\n

Methods you can also try:

\n\n

Filter Only Arrays

\n

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

\n
const arr = [undefined, null, 0, 'str', 1, { a: 'b' }, [5, 6], [{ a: 5 }]];\narr.filter(Array.isArray);\n// -> [[5,6], [{a: 5}]]
\n

Filtering Objects, Arrays, Functions, Classes

\n

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

\n

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

\n
const MyFunc = () => {};\nclass MyClass {}\n\nconst arr = [null, 0, 'str', 1.5, 5, { a: 'b' }, [1], MyFunc, MyClass];\narr.filter(Object.isExtensible);\n// -> [{a: \"b\"}, [1], () => {}, class MyClass]
\n

Methods you can also try:

\n\n
\n

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.

\n

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.

\n

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

\n

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

","timeToRead":4,"id":"c91a7df2-969f-5d0f-b7ec-36b02085b379","frontmatter":{"date":"November 02, 2019","title":"Filtering Arrays Like A Pro"}}},"pageContext":{"slug":"/blog/filtering-arrays-like-a-pro"}},"staticQueryHashes":["1033876704","3435786681","550521386"]}