all right I'm back for another
higher-order function with JavaScript
arrays video and in this video I will
talk about filter filters actually to be
honest it might be my favorite one of
these it's just it's lovely so let's
look at what let's so filter what does
the word filter means it's it's called
filter for a reason just like you might
filter your water and filter out all the
stuff you don't want if you have an
array that has some grime and stuff in
it you could filter it out so how do you
do that it's a higher order function so
what that means is it expects as an
argument some function and what that
function is it's a function that
receives as an argument itself an
element of the array and based on that
element it should return true or false
and I always forget this I think it
returns true if you want to keep it and
false if you don't want to keep it so
even though it's a filter you're
thinking true I would have filter it out
I think it's true I want to keep it
we'll have to try and look up and
documentation ok and we're gonna do the
same thing so this is where are we last
left off with this reduce stuff she's
still here after that thank you and so
what I'm going to do is I'm going to
keep this same little silly array and
I'm gonna say I'm gonna write a function
and I'm gonna say is you know
interesting let's hmm let's call this
function is even so what this function
is going to do is it's going to take a
number and it will return true if it's
an even number or false if it's an odd
number so it's going to if num and how
do I do this I can use the modulus
operator the modulus operator see the
coding train video from go on Levin
about modulus is an operator that gives
you the remainder of division so if you
divide something by two and get a
remainder of zero it's an even number so
if num modulus two equals zero then I
want to return true otherwise I want to
return false now I always do this
because this is the kind of person I I
will write it in seven lines of code to
make it say exactly what
doing even if it can be done in one line
of code but this is this is a moment
where I think it's worth today these
videos are a little bit about reducing
the amount of typing it's worth saying
that I don't need to say if this is true
return true if it's true just return the
fact that it's true so this evaluates a
true or false I'm gonna just return that
so I can do this
now I should be able to say what's I
should be able to say
Vale's dot reduce is even so the
question is is my array going to have
only left in it the even numbers or the
odd numbers we could look it up in the
documentation I could speculate but we
could also just try it now I'm pretty oh
this didn't say reduce this should say
filter of course I should be filtering
based on this function hello and I'm
pretty sure let's just double check I'm
pretty sure that this is the case where
it creates a new array and returns back
like I like we saw with the map function
so if I save this here and I hit refresh
we're say okay so that's the original
array so this is not working yet I want
to say Val's equals the new erase I'm
going to overwrite that variable with
the new array that's been filtered and
I'm gonna hit refresh and there we only
have the even ones left so we have the
even ones left because this returned
true so if it returns true keep the
value if it returns false don't keep the
value and by the way what I'm gonna do
with this later in like a particle
system example is I have an array of all
these particle objects I could just say
filter out all the ones that are off the
screen or filter all the ones out that
alpha has faded out to zero so that's
why this filter can become really really
useful
so let's now shorten this using es6
syntax one thing I might want to do is
just use this as X right change this to
X now I'm gonna get rid of function I'm
gonna get rid of the name I'm gonna put
the arrow syntax in I'm gonna forget
about this and I'm gonna get rid of the
return because it's assumed so basically
this is what I can do right this is
basically I can now write that I do that
really quickly because I'm kind of
assuming you've watched my previous
videos where I stay
through that more slowly but basically I
can say hey filter every value X based
on the weather X modulus two equals zero
so this should give me exactly the same
result
again this is the thing this is why I
hesitate this is so unlike me I don't I
I would write this in like ten but
there's there's a wonder and beauty to
this because even though I feel like
this is cryptic and a little harder to
follow there is a moment I think after
you get used to this arrow syntax and
write a lot of these functions and I'm
the comments are going on that I'm going
to look at in a second that you start to
get used to this and this this becomes a
bit more intuitive and it actually can
make the code more readable look there
we go it worked now I can say let's just
filter it out for the odd ones equals
one now I have the odd ones I could say
not this and that would be that's like
not the odd ones there's also the even
ones and we could see there we go so
wonderful I'm gonna take a look at the
chat and see that I got some extra notes
in there yep okay so um alka in the chat
points out that you can filter by truthy
and falsy values not just explicitly
true or false what does that mean
in other words I could filter out let's
say I had an array of objects and a few
of them were undefined
you know we're empty I could filter out
any spots where something's undefined so
many things in JavaScript can be sort of
like thought of as false or true based
on its its value like if an object
exists it's true if it's undefined its
false
so I could say so this would say like
hey I have an array with stuff and over
on this actually oh okay
so I could actually just do this right
that's what that's what alka is telling
me so I could check like Oh filter out
just keep everything that's not
undefined right so this if I did this it
would give me five four two one because
I would filter out the undefined but
undefined is like a falsie value so I
could just filter out the items that
like kind of turn into false things and
actually this is going to give me yeah
right so
worked as well and I could say not X
then I have autorai with just undefined
okay so I think we've seen I think this
has been good I think we've seen
filtered filter filter filter the
function filter do you have any
questions we're not actually in the same
room at the same time because I'm
recording a video there is a live chat
going on let me check if there's any
questions two wonderful tips that just
came in from the chat that I would love
to show this is great having a live chat
wide for these videos so let's say I
wanted to do that eat that even thing
again where I'm keeping only the even
values I had it like this X modulus 2
equals 0 that's the even ones well
that's silly X modulus 2 evaluates
always to 0 or 1 1 being true 0 being
false in a sort of truth a falsie way so
I could have actually done this and
that's gonna keep the odd ones and if I
were to say not I think I'm gonna need
parentheses yeah
I'm gonna need parentheses around this
and now I'm gonna get the even ones so
that's lovely then there's a lot of
times when you're working with strings
that's that I've had this problem
actually a ton so let's say I have a
this is gonna be useful let's say I have
a string it was a dark and stormy night
and what I'm doing is I'm saying let
words equal s dot split and I'm gonna
use a regular well I'm just gonna say
split by space and then I'm gonna say
console dot log words so you can see ah
it was a dark and stormy night now
things could happen like what if I had
two spaces here by accident and I hit
refresh look at that because I had two
spaces I got an empty string by accident
now the truth of the matter is if you
watch my videos about regular
expressions I can be more thoughtful
about the split what I pass into split
and use a regular expression for a
particular pattern to match but even so
like live item you might not know I can
a break expression is a way of creating
a pattern and so what I could do is say
anything that's not a word character and
what I wanted to see here is whenever I
do this
I always get things extra empty strings
this happened even here so this is
something that I do in one of my
previous videos this is basically a
secret code for saying split by anything
that's not a through Z or 0 through 9
and that has to do with meta characters
and regular expressions but actually
I've always having this problem where I
get these extra empty strings so I could
always just have a filter now filter by
s s dot length by s dot length so look
at this this should say cuz it's true or
false see if this string has a not s dot
length right if the string is the length
of 0 I should filter it out so now let's
do this we can see oh no no that didn't
work not maybe I shouldn't use s here
let's use X filter X not X dot length
oh no X dot length I want X dot length
ah the opposite that was right so I can
use s here I just was using s in too
many places because it was the string so
word word dot length right so I want to
use the length to evaluate the word
whether it qualifies or not I could of
course say like greater than 3 right if
I want to just have only the 3 letter
words this will get rid of it and a now
you can see I only have darkstorm it got
rid of was 2 because it's not greater
than or equals 2 so you can see how this
filter you can chain these kind of again
I've got these really long lines of code
which is very unlike me but you can see
I can chain this stuff so I take this
string I split it up so I have all the
words but you know what I actually only
want the words that are three or more
characters and instead of having to
write a loop and an if statement and you
splice how I always do it this is a nice
really one line of code kind of way of
using colter oh I'm happy about that
okay so thanks for watching this video
I hope this was helpful to you about
filter and I will come back in one more
video I might as well I believe I've
covered sorts somewhere but maybe I'll
make a standalone video that's just
about the sort function and that'll be
the last one that I'll do in terms of
these higher-order array functions thank
you
[Music]