1
00:00:00,000 --> 00:00:04,848
[MUSIC]

2
00:00:04,848 --> 00:00:09,455
In previous videos, I introduced you to
the most common array iteration methods

3
00:00:09,455 --> 00:00:11,700
JavaScript developers use.

4
00:00:11,700 --> 00:00:15,690
You got to see how they behaved with
simple array elements like strings and

5
00:00:15,690 --> 00:00:16,820
numbers.

6
00:00:16,820 --> 00:00:20,660
Arrays often contain more complex
data structures like objects or

7
00:00:20,660 --> 00:00:24,740
other arrays, and that's where
these method start to help you out.

8
00:00:24,740 --> 00:00:27,460
We'll take a look at some
examples shortly, but

9
00:00:27,460 --> 00:00:33,150
first I want to take a closer look at the
behavior of the map and filter methods.

10
00:00:33,150 --> 00:00:35,690
One of the useful features
of these array methods

11
00:00:35,690 --> 00:00:37,390
is that they can be chained together.

12
00:00:38,420 --> 00:00:42,280
What I mean is that map and
filter are methods of an array and

13
00:00:42,280 --> 00:00:44,330
they both return an array.

14
00:00:44,330 --> 00:00:47,780
This means you can connect or
chain the methods together.

15
00:00:47,780 --> 00:00:53,680
For example, you can transform one array
with map, then filter that new array.

16
00:00:53,680 --> 00:00:56,990
This lets us create very
compact code that does a lot

17
00:00:56,990 --> 00:00:58,720
in only a few lines of programming.

18
00:01:00,010 --> 00:01:03,250
Let me show you what I mean, so

19
00:01:03,250 --> 00:01:07,400
far, we've been storing the results
of filter and map in variables.

20
00:01:07,400 --> 00:01:13,400
Like this example here, I mentioned before
that both these methods return arrays.

21
00:01:13,400 --> 00:01:17,550
This means when the JavaScript interpreter
evaluates this filter method, for

22
00:01:17,550 --> 00:01:21,600
example, it becomes
an array with out any 2s.

23
00:01:21,600 --> 00:01:24,050
Because the filter
method returns an array,

24
00:01:24,050 --> 00:01:28,520
we can immediately call another array
method on it at the end, like this.

25
00:01:30,270 --> 00:01:33,670
Now the JavaScript interpreter
sees it has another task to do

26
00:01:33,670 --> 00:01:36,600
after it finishes with the filter method.

27
00:01:36,600 --> 00:01:40,680
Here we're calling map on a new
array from the filter method.

28
00:01:40,680 --> 00:01:45,720
In other words the filter method takes
the array we start with and removes the 2.

29
00:01:45,720 --> 00:01:51,090
Then the map method takes the array
with no 2 and adds 1 to each element.

30
00:01:51,090 --> 00:01:54,350
And we end up with an array
containing the numbers 2 and 4.

31
00:01:55,400 --> 00:02:00,620
As long as a method returns an array, you
can call another array method on the end.

32
00:02:00,620 --> 00:02:02,950
And you can do this as much as you want.

33
00:02:02,950 --> 00:02:07,320
This pattern is common in programming, and
you might hear it called method chaining

34
00:02:07,320 --> 00:02:10,120
because each method
resembles a link in a chain.

35
00:02:11,150 --> 00:02:13,370
One way you could use this
technique might be for

36
00:02:13,370 --> 00:02:18,350
removing the duplicates in an array of
numbers before turning them into strings.

37
00:02:18,350 --> 00:02:21,580
You could start with the filter
method to clean out the duplicates,

38
00:02:21,580 --> 00:02:26,920
then chain map on the end to transform
the cleaned array into strings.

39
00:02:26,920 --> 00:02:30,530
By the way, if you'd like to see
an example of using filter to remove

40
00:02:30,530 --> 00:02:32,850
array duplicates, see the teacher's notes.

41
00:02:34,010 --> 00:02:37,280
Because the JavaScript
interpreter ignores whitespace,

42
00:02:37,280 --> 00:02:40,556
you will often see each method
on a separate line like this.

43
00:02:47,079 --> 00:02:51,618
Chains like this can be easier to read and
understand because you start with one

44
00:02:51,618 --> 00:02:57,100
value on the left, or top, and progress
to a new value on the right, or bottom.

45
00:02:57,100 --> 00:02:58,550
You can plug methods in and

46
00:02:58,550 --> 00:03:02,500
out of the chain in a modular way, which
makes the code more maintainable as well.

47
00:03:03,510 --> 00:03:07,950
For example, if I decided I didn't want to
filter this array before mapping over it,

48
00:03:09,730 --> 00:03:12,490
I could just remove the line
where filter is called.

49
00:03:12,490 --> 00:03:15,920
The other behavior to note here is
that these methods don't affect

50
00:03:15,920 --> 00:03:17,510
the original array.

51
00:03:17,510 --> 00:03:21,940
They return a new array, because
the original array remains unchained,

52
00:03:21,940 --> 00:03:26,690
it can be used in a different method
chain or referred to in other ways.

53
00:03:26,690 --> 00:03:30,390
Generally, making new arrays
means you have more options.

54
00:03:30,390 --> 00:03:31,810
With these points in mind,

55
00:03:31,810 --> 00:03:36,280
let's see some examples of how these
methods can manipulate more complex data.