Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Array Iteration Methods!
You have completed JavaScript Array Iteration Methods!
Preview
The filter method can be used to remove elements from an array.
Snippets from the Video
const names = ['Selma', 'Ted', 'Mike', 'Sam', 'Sharon', 'Marvin'];
let sNames = [];
names.forEach(name => {
if(name.charAt(0) === 'S') {
sNames.push(name);
}
});
console.log(sNames);
const numbers = [1,2,3,4,5,6,7,8,9,10];
// Result: [2,4,6,8,10]
MDN Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up