- Chaining Array Methods 3:37
- Method Chaining 1 objective
- Working with Objects in Arrays 7:40
- Working with Objects 1 objective
- Combining filter() and map() 4:13
- Combining filter() and map() 1 objective
- Combining filter() and reduce() 4:42
- Combining filter() and reduce() 1 objective
- Nested Data and Additional Exploration 7:25
- Array Flattening 1 objective
- Nested Data 1 objective
Preview
Video Player
00:00
00:00
Combining filter() and map()
4:13You can combine filter() and map() to clean an array of unwanted values before transforming the leftover items. Let's work with some examples in this video.
Let's combine filter and map with arrays.
0:00
This can be useful when you want to
remove some elements before transforming
0:03
the remaining elements in some way.
0:07
For example,
here's the list of names in an array.
0:10
Let's take only the ones starting with the
letter S and create an array of objects.
0:13
Each object should have one property,
0:19
name, which points to the string
value of the username's array.
0:22
Here's what we want to construct.
0:27
Since you've already seen these two
methods together, pause the video and
0:29
see if you can work out
how to create this array.
0:33
To solve this,
I first created a new variable, users.
0:38
And I set it equal to userNames.
0:48
And we wanted to filter and then map.
0:53
Filter's callback will receive each name.
1:05
So I'll call the parameter, name.
1:08
It needs to return true,
only when the name starts with S.
1:13
So I'll return the expression name,
charAt(0)
1:18
equals capitol S, then
1:25
the array the filter returns, contains
name strings like the original array.
1:31
So I'll use name,
as the parameter as well.
1:36
I want to return an object now, so
1:43
I will write an object
literal with name as
1:47
the property, setting an equal to name.
1:52
There is an issue that
pertains to arrow functions,
1:57
Because they use curly braces to surround
their function bodies, the arrow
2:00
function doesn't know this is an object
literal, which also uses curly braces.
2:04
I need to surround this
object with parenthesis.
2:10
That's just to tell JavaScript
2:14
that I want to return this object
literal from the callback.
2:18
Because the variable name is the same
as the property I wanna create,
2:22
I can also use this property shorthand.
2:27
Now I'll log users to the console.
2:31
And I'll save this, and I'll run it.
2:42
You can see, I have the three objects in
an array now and they all start with S.
2:47
Let's try one more.
2:53
I'm gonna replace this
code with a new object,
2:56
and this is just all those
users with ages now.
3:01
And you can copy this from
the teachers notes if you'd like to.
3:07
Now, see if you can filter and
map to create an array of name strings.
3:13
The names should be the users 30 years and
over.
3:18
Pause the video and
give it a shot if you want to.
3:22
I'm going to paste my solution in now,
so if you want to pause the video,
3:27
this is your last chance.
3:31
As you can see,
I first filtered the user's array,
3:37
returning true only for users who had
ages greater than or equal to 30.
3:41
Then I mapped over that array of
objects returning only the usernames.
3:46
If I save this and run it.
3:52
You can see I end up with
an array of strings of
3:58
usernames with ages over or equal to 30.
4:02
In the next video,
4:06
let's combine filter with reduce to
solve some common problems with data.
4:07