Preview
Video Player
00:00
00:00
Remove Array Items with filter()
8:45The filter method can be used to remove elements from an array.
[MUSIC]
0:00
In the previous part of this course,
0:04
you learned how to use forEach
to iterate over an array.
0:06
The rest of the methods you'll learn in
this course follow a similar pattern, but
0:10
they accomplish different things.
0:14
Let's start with the filter method.
0:16
You can use filter to
remove items from an array.
0:18
Filter doesn't affect the original array.
0:22
Instead, like other methods you'll learn
about here, it returns a newArray.
0:25
In this case, an array without
the items you wanted removed.
0:30
Say for example that you have
an array of ages as numbers, and
0:34
you want to remove every age below 18 and
over 24.
0:38
You could use filter to
go through each item and
0:43
remove those numbers
from the resulting array.
0:45
Or perhaps you have an array of IDs and
you want to remove a specific ID from it.
0:48
Filter can do this for you too.
0:54
You call filter by passing
a callback function into the method.
0:56
Just like forEach,
1:00
the first parameter of the callback
will be an item from the array.
1:01
The callback is simply a function
that returns either true or false.
1:06
If the callback returns true, filter
will add that item to the new array.
1:10
If it returns false,
the item won't be added.
1:15
I wanna show you the filter method,
1:20
using an example of forEach
from an earlier video.
1:22
Here's my code from where we removed all
names that didn't start with the letter S.
1:26
This code returns a subset
of the original array.
1:32
In other words, it's filtering the array.
1:35
But you'll see the filter method
can save you time in typing, and
1:38
is a better approach in this case.
1:41
The first thing I'll do is
replace forEach with filter.
1:44
The filter method returns a new array, so
1:50
we can set S names to equal
this whole expression, like so.
1:53
I used let when I declared
sNames before because I wanted
2:00
to change the array inside
the forEach method.
2:04
Now, I won't need to change the array,
so I'll change this let to const.
2:08
The callback passed to the filter
method has to return true or false.
2:14
If the first letter is S,
I want to return true.
2:19
So the name is added to the new array.
2:23
Otherwise, I wanna return false.
2:27
So the name is discarded.
2:35
If I save and run the current code,
You can see it works.
2:37
Let's look at this code again though.
2:45
Any time you notice
you're returning true or
2:47
false from an if statement, you can
actually just return the condition itself.
2:50
That's because the condition
is returning true or false, so
2:55
you don't need to add
extra code like this.
2:59
Now we're just returning
the value of this expression.
3:08
Remember, arrow functions with one
statement can be condensed to one line
3:12
whose value will be returned.
3:16
This is a functionally equivalent
way to write the callback and
3:18
it follows a pattern you will
see often with filter functions.
3:21
Let's just run it one more
time to make sure it works.
3:25
And it does.
3:30
We don't need to pass an anonymous
function to filter though.
3:31
Let's say for
3:36
example that we want to filter other
arrays that don't start with S.
3:37
I'll cut this function out and
assign it to a variable above.
3:41
Or call the function starts with S,
because it will return
3:49
true if the input starts with S and
false otherwise.
3:53
You'll see that convention often
with functions that return true or
3:59
false depending on their input.
4:02
Their name will indicate
the true condition they test for.
4:04
Now, I can pass the variable that
holds the function to filter.
4:08
I'll save this.
4:14
And you can see that it still works.
4:17
If I have other arrays to filter, I can
reuse this variable instead of typing
4:23
this same function out over and
over again.
4:27
You'll see this pattern
a lot array methods,
4:31
where you pass a variable into the method,
rather than an inline function.
4:33
Let's try another one.
4:37
I'll erase this code, And
4:40
I'll create an array of numbers, 1 to 5.
4:45
Let's return all the values except the 3.
4:56
I'll create a new constant named no3,
And set it = to numbers.
5:00
We want to filter out the 3 of the
numbers, so I'll call filter on numbers.
5:11
The parameter to the callback will
be a number from the array, so
5:20
I'll call it number.
5:24
We want every number except the 3,
so I'll return the expression,
5:28
number, Does not = 3.
5:33
In other words, when number is not 3,
5:39
this function will return true and
the number will be kept.
5:42
When number is 3, it will return false and
the 3 will be discarded.
5:47
I'll log the new variable to
the console so we can see it.
5:53
I'll save, and I'll execute the file.
6:00
It works.
6:05
Can you think of how to change this code
so an array with only a 2 is returned?
6:06
Pause for a moment and try it out.
6:12
You can replace the 3 with a 2, and
the bang, or exclamation point,
6:16
with an = sign to return true when this
number is the 2, and false otherwise.
6:21
I'll run this code now.
6:28
And you can see, only the 2 is returned.
6:34
It would probably be a good idea to change
the variable name to reflect what this
6:37
code does now.
6:41
But this works for a quick demo.
6:42
Let me clear this code out and
give you another challenge.
6:45
I'll keep the numbers array,
And add some numbers to it.
6:52
You can copy this line from the snippets
in the teacher's notes below if
7:00
you want to.
7:04
For this challenge,
7:06
see if you can use the filter method
to return only the even numbers.
7:07
There are a number of ways to do this, but
7:11
I just wanna let you know about
the remainder operator in JavaScript.
7:14
I've included a link to the MDN
documentation on the remainder operator
7:18
in the notes below.
7:22
If you're not familiar with it,
check that page out and
7:24
be sure to look at some
of the code examples.
7:27
Pause the video now if you wanna
try to solve this on your own.
7:30
I'll create a variable called evens where
I'll store the results of my filtering.
7:36
For the callback,
I'll use the parameter number.
7:50
To determine if a number is even,
7:56
we need to know if it is
divisible by 2 with no remainder.
7:58
So I'll use the remainder operator
with a number argument and 2,
8:03
And check if that's = to 0.
8:12
If it is 0,
the expression will be true and
8:16
the number will be kept in the new array.
8:18
Otherwise, the number will be discarded.
8:21
I'll log evens to the console,
8:24
Save and run the file.
8:33
It works.
8:37
Next up,
8:39
let's have a look at how to transform
elements in an array using the map method.
8:40