Using filter()
in JavaScript can be really handy, you can filter an
array in so many ways, lets explore a little bit about that.
Start with a simple numbers array:
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Now, lets filter this array in order to return only values below 8
:
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// We're *saying*, get me all values
// that are less less (<) than 8
array.filter((value) => value < 8)
With this filter it'll return [1, 2, 3, 4, 5, 6, 7]
, pretty neat right?
Lets try a few more examples before moving on. Check the comments on the code:
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// Get only odd numbers
array.filter((value) => value & 1) // [1, 3, 5, 7, 9]
// Get only even numbers
array.filter((value) => !(value & 1)) // [2, 4, 6, 8, 10]
// Get values between `3` and `8`
array.filter((value) => value > 3 && value < 8) // [4, 5, 6, 7]
As you can see we can use filter()
in many ways, lets play
a little bit with strings
🙂
Again, lets set up a simple array:
const array = ['@telmo', 'https://telmo.im', 'Fullstack Developer']
Lets assume we want to filter just URLs, so, we
can filter strings that start with http
as an example:
const array = ['@telmo', 'https://telmo.im', 'Fullstack Developer']
array.filter((value) => value.startsWith('http'))
This will return ["https://telmo.im"]
. I love JavaScript!
Since we know handlers start with an @
, we can do exactly the same
thing to filter all handlers, lets add a few more entries into our array:
const array = ['Telmo', '@telmo', '@codinghubio', 'Coding Hub']
array.filter((value) => value.startsWith('@'))
This should return ["@telmo", "@codinghubio"]
, sweet!
Finally, lets just go through a more complex array, an array of objects, lets assume an array of profiles:
const profiles = [
{ name: 'Telmo', handler: '@telmo', followers: 1000 },
{ name: 'Catalin', handler: '@catalinmpit', followers: 2000 },
{ name: 'Marc', handler: '@_marcba', followers: 3000 },
]
Now lets try and filter profiles that have more than 1000
followers:
profiles.filter((value) => value.followers > 1000)
With this filter you should get:
[
{
"name": "Catalin",
"handler": "@catalinmpit",
"followers": 2000
},
{
"name": "Marc",
"handler": "@_marcba",
"followers": 3000
}
]
In the filter you can do another thing, which is destructuring the
followers
directly, like this:
profiles.filter(({ followers }) => followers > 1000)
I was about to end this writing now, but... We can still use another approach into how we filter arrays.
Lets assume we have an array with numbers
and strings
, and we
want to filter the array to return just the strings
, how do we
check in JavaScript if something is a string
?
typeof something === 'string'
Right, lets take the following example:
const array = [1, 3, 'Telmo', 4, 6, '@telmo']
// We can use the `typeof` directly in the filter
array.filter((value) => typeof value === 'string')
It should return ["Telmo", "@telmo"]
, awesome! But, we can
refactor this a little bit, assume you might want to use a function
that checks if something is a string
, lets take a look:
const array = [1, 3, 'Telmo', 4, 6, '@telmo']
function isString(value) {
return typeof value === 'string'
}
array.filter(isString)
This returns exactly the same ["Telmo", "@telmo"]
, but look how
our filter()
got much cleaner, and bonus, you can re-use the isString()
function somewhere else.
Note that this is not a right way of doing things approach, you should use whatever you think is fits you best.
That's it, hope it helped somehow ✌️