- 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
Chaining Array Methods
3:37Because the map method returns an array, you can call another array method directly after it. The same is true for the filter method. This is commonly called chaining methods, because each call is like a link in a chain.
[MUSIC]
0:00
In previous videos, I introduced you to
the most common array iteration methods
0:04
JavaScript developers use.
0:09
You got to see how they behaved with
simple array elements like strings and
0:11
numbers.
0:15
Arrays often contain more complex
data structures like objects or
0:16
other arrays, and that's where
these method start to help you out.
0:20
We'll take a look at some
examples shortly, but
0:24
first I want to take a closer look at the
behavior of the map and filter methods.
0:27
One of the useful features
of these array methods
0:33
is that they can be chained together.
0:35
What I mean is that map and
filter are methods of an array and
0:38
they both return an array.
0:42
This means you can connect or
chain the methods together.
0:44
For example, you can transform one array
with map, then filter that new array.
0:47
This lets us create very
compact code that does a lot
0:53
in only a few lines of programming.
0:56
Let me show you what I mean, so
1:00
far, we've been storing the results
of filter and map in variables.
1:03
Like this example here, I mentioned before
that both these methods return arrays.
1:07
This means when the JavaScript interpreter
evaluates this filter method, for
1:13
example, it becomes
an array with out any 2s.
1:17
Because the filter
method returns an array,
1:21
we can immediately call another array
method on it at the end, like this.
1:24
Now the JavaScript interpreter
sees it has another task to do
1:30
after it finishes with the filter method.
1:33
Here we're calling map on a new
array from the filter method.
1:36
In other words the filter method takes
the array we start with and removes the 2.
1:40
Then the map method takes the array
with no 2 and adds 1 to each element.
1:45
And we end up with an array
containing the numbers 2 and 4.
1:51
As long as a method returns an array, you
can call another array method on the end.
1:55
And you can do this as much as you want.
2:00
This pattern is common in programming, and
you might hear it called method chaining
2:02
because each method
resembles a link in a chain.
2:07
One way you could use this
technique might be for
2:11
removing the duplicates in an array of
numbers before turning them into strings.
2:13
You could start with the filter
method to clean out the duplicates,
2:18
then chain map on the end to transform
the cleaned array into strings.
2:21
By the way, if you'd like to see
an example of using filter to remove
2:26
array duplicates, see the teacher's notes.
2:30
Because the JavaScript
interpreter ignores whitespace,
2:34
you will often see each method
on a separate line like this.
2:37
Chains like this can be easier to read and
understand because you start with one
2:47
value on the left, or top, and progress
to a new value on the right, or bottom.
2:51
You can plug methods in and
2:57
out of the chain in a modular way, which
makes the code more maintainable as well.
2:58
For example, if I decided I didn't want to
filter this array before mapping over it,
3:03
I could just remove the line
where filter is called.
3:09
The other behavior to note here is
that these methods don't affect
3:12
the original array.
3:15
They return a new array, because
the original array remains unchained,
3:17
it can be used in a different method
chain or referred to in other ways.
3:21
Generally, making new arrays
means you have more options.
3:26
With these points in mind,
3:30
let's see some examples of how these
methods can manipulate more complex data.
3:31