1
00:00:00,540 --> 00:00:04,870
[MUSIC]

2
00:00:04,870 --> 00:00:06,730
In the previous part of this course,

3
00:00:06,730 --> 00:00:10,150
you learned how to use forEach
to iterate over an array.

4
00:00:10,150 --> 00:00:14,033
The rest of the methods you'll learn in
this course follow a similar pattern, but

5
00:00:14,033 --> 00:00:16,280
they accomplish different things.

6
00:00:16,280 --> 00:00:17,840
Let's start with the filter method.

7
00:00:18,870 --> 00:00:22,480
You can use filter to
remove items from an array.

8
00:00:22,480 --> 00:00:25,150
Filter doesn't affect the original array.

9
00:00:25,150 --> 00:00:30,360
Instead, like other methods you'll learn
about here, it returns a newArray.

10
00:00:30,360 --> 00:00:34,250
In this case, an array without
the items you wanted removed.

11
00:00:34,250 --> 00:00:38,330
Say for example that you have
an array of ages as numbers, and

12
00:00:38,330 --> 00:00:43,070
you want to remove every age below 18 and
over 24.

13
00:00:43,070 --> 00:00:45,690
You could use filter to
go through each item and

14
00:00:45,690 --> 00:00:48,820
remove those numbers
from the resulting array.

15
00:00:48,820 --> 00:00:54,110
Or perhaps you have an array of IDs and
you want to remove a specific ID from it.

16
00:00:54,110 --> 00:00:56,490
Filter can do this for you too.

17
00:00:56,490 --> 00:01:00,658
You call filter by passing
a callback function into the method.

18
00:01:00,658 --> 00:01:01,790
Just like forEach,

19
00:01:01,790 --> 00:01:06,200
the first parameter of the callback
will be an item from the array.

20
00:01:06,200 --> 00:01:10,840
The callback is simply a function
that returns either true or false.

21
00:01:10,840 --> 00:01:15,728
If the callback returns true, filter
will add that item to the new array.

22
00:01:15,728 --> 00:01:18,640
If it returns false,
the item won't be added.

23
00:01:20,152 --> 00:01:22,616
I wanna show you the filter method,

24
00:01:22,616 --> 00:01:26,159
using an example of forEach
from an earlier video.

25
00:01:26,159 --> 00:01:30,960
Here's my code from where we removed all
names that didn't start with the letter S.

26
00:01:32,060 --> 00:01:35,530
This code returns a subset
of the original array.

27
00:01:35,530 --> 00:01:38,400
In other words, it's filtering the array.

28
00:01:38,400 --> 00:01:41,930
But you'll see the filter method
can save you time in typing, and

29
00:01:41,930 --> 00:01:44,430
is a better approach in this case.

30
00:01:44,430 --> 00:01:47,870
The first thing I'll do is
replace forEach with filter.

31
00:01:50,371 --> 00:01:53,402
The filter method returns a new array, so

32
00:01:53,402 --> 00:01:57,740
we can set S names to equal
this whole expression, like so.

33
00:02:00,656 --> 00:02:04,758
I used let when I declared
sNames before because I wanted

34
00:02:04,758 --> 00:02:08,280
to change the array inside
the forEach method.

35
00:02:08,280 --> 00:02:12,500
Now, I won't need to change the array,
so I'll change this let to const.

36
00:02:14,087 --> 00:02:19,290
The callback passed to the filter
method has to return true or false.

37
00:02:19,290 --> 00:02:22,750
If the first letter is S,
I want to return true.

38
00:02:23,951 --> 00:02:27,000
So the name is added to the new array.

39
00:02:27,000 --> 00:02:32,476
Otherwise, I wanna return false.

40
00:02:35,576 --> 00:02:37,916
So the name is discarded.

41
00:02:37,916 --> 00:02:45,760
If I save and run the current code,
You can see it works.

42
00:02:45,760 --> 00:02:47,930
Let's look at this code again though.

43
00:02:47,930 --> 00:02:50,150
Any time you notice
you're returning true or

44
00:02:50,150 --> 00:02:55,560
false from an if statement, you can
actually just return the condition itself.

45
00:02:55,560 --> 00:02:59,020
That's because the condition
is returning true or false, so

46
00:02:59,020 --> 00:03:01,340
you don't need to add
extra code like this.

47
00:03:08,608 --> 00:03:12,080
Now we're just returning
the value of this expression.

48
00:03:12,080 --> 00:03:16,469
Remember, arrow functions with one
statement can be condensed to one line

49
00:03:16,469 --> 00:03:18,290
whose value will be returned.

50
00:03:18,290 --> 00:03:21,458
This is a functionally equivalent
way to write the callback and

51
00:03:21,458 --> 00:03:25,230
it follows a pattern you will
see often with filter functions.

52
00:03:25,230 --> 00:03:27,640
Let's just run it one more
time to make sure it works.

53
00:03:30,576 --> 00:03:31,963
And it does.

54
00:03:31,963 --> 00:03:35,330
We don't need to pass an anonymous
function to filter though.

55
00:03:36,583 --> 00:03:37,320
Let's say for

56
00:03:37,320 --> 00:03:41,830
example that we want to filter other
arrays that don't start with S.

57
00:03:41,830 --> 00:03:45,050
I'll cut this function out and
assign it to a variable above.

58
00:03:49,163 --> 00:03:53,966
Or call the function starts with S,
because it will return

59
00:03:53,966 --> 00:03:59,140
true if the input starts with S and
false otherwise.

60
00:03:59,140 --> 00:04:02,620
You'll see that convention often
with functions that return true or

61
00:04:02,620 --> 00:04:04,780
false depending on their input.

62
00:04:04,780 --> 00:04:08,410
Their name will indicate
the true condition they test for.

63
00:04:08,410 --> 00:04:11,920
Now, I can pass the variable that
holds the function to filter.

64
00:04:14,062 --> 00:04:15,280
I'll save this.

65
00:04:17,559 --> 00:04:21,700
And you can see that it still works.

66
00:04:23,868 --> 00:04:27,948
If I have other arrays to filter, I can
reuse this variable instead of typing

67
00:04:27,948 --> 00:04:31,090
this same function out over and
over again.

68
00:04:31,090 --> 00:04:33,240
You'll see this pattern
a lot array methods,

69
00:04:33,240 --> 00:04:37,952
where you pass a variable into the method,
rather than an inline function.

70
00:04:37,952 --> 00:04:40,140
Let's try another one.

71
00:04:40,140 --> 00:04:45,250
I'll erase this code, And

72
00:04:45,250 --> 00:04:53,947
I'll create an array of numbers, 1 to 5.

73
00:04:56,674 --> 00:05:00,400
Let's return all the values except the 3.

74
00:05:00,400 --> 00:05:08,139
I'll create a new constant named no3,
And set it = to numbers.

75
00:05:11,450 --> 00:05:17,080
We want to filter out the 3 of the
numbers, so I'll call filter on numbers.

76
00:05:20,374 --> 00:05:24,048
The parameter to the callback will
be a number from the array, so

77
00:05:24,048 --> 00:05:25,350
I'll call it number.

78
00:05:28,085 --> 00:05:33,367
We want every number except the 3,
so I'll return the expression,

79
00:05:33,367 --> 00:05:37,613
number, Does not = 3.

80
00:05:39,675 --> 00:05:42,414
In other words, when number is not 3,

81
00:05:42,414 --> 00:05:47,120
this function will return true and
the number will be kept.

82
00:05:47,120 --> 00:05:53,020
When number is 3, it will return false and
the 3 will be discarded.

83
00:05:53,020 --> 00:05:56,070
I'll log the new variable to
the console so we can see it.

84
00:06:00,719 --> 00:06:02,990
I'll save, and I'll execute the file.

85
00:06:05,045 --> 00:06:06,380
It works.

86
00:06:06,380 --> 00:06:12,280
Can you think of how to change this code
so an array with only a 2 is returned?

87
00:06:12,280 --> 00:06:13,960
Pause for a moment and try it out.

88
00:06:16,844 --> 00:06:21,606
You can replace the 3 with a 2, and
the bang, or exclamation point,

89
00:06:21,606 --> 00:06:26,960
with an = sign to return true when this
number is the 2, and false otherwise.

90
00:06:28,049 --> 00:06:29,204
I'll run this code now.

91
00:06:34,552 --> 00:06:37,690
And you can see, only the 2 is returned.

92
00:06:37,690 --> 00:06:41,610
It would probably be a good idea to change
the variable name to reflect what this

93
00:06:41,610 --> 00:06:42,990
code does now.

94
00:06:42,990 --> 00:06:45,650
But this works for a quick demo.

95
00:06:45,650 --> 00:06:48,510
Let me clear this code out and
give you another challenge.

96
00:06:52,451 --> 00:06:57,170
I'll keep the numbers array,
And add some numbers to it.

97
00:07:00,969 --> 00:07:04,419
You can copy this line from the snippets
in the teacher's notes below if

98
00:07:04,419 --> 00:07:05,060
you want to.

99
00:07:06,060 --> 00:07:07,150
For this challenge,

100
00:07:07,150 --> 00:07:11,790
see if you can use the filter method
to return only the even numbers.

101
00:07:11,790 --> 00:07:14,140
There are a number of ways to do this, but

102
00:07:14,140 --> 00:07:18,230
I just wanna let you know about
the remainder operator in JavaScript.

103
00:07:18,230 --> 00:07:22,470
I've included a link to the MDN
documentation on the remainder operator

104
00:07:22,470 --> 00:07:24,120
in the notes below.

105
00:07:24,120 --> 00:07:27,492
If you're not familiar with it,
check that page out and

106
00:07:27,492 --> 00:07:30,165
be sure to look at some
of the code examples.

107
00:07:30,165 --> 00:07:33,190
Pause the video now if you wanna
try to solve this on your own.

108
00:07:36,860 --> 00:07:41,330
I'll create a variable called evens where
I'll store the results of my filtering.

109
00:07:50,058 --> 00:07:52,940
For the callback,
I'll use the parameter number.

110
00:07:56,635 --> 00:07:58,863
To determine if a number is even,

111
00:07:58,863 --> 00:08:03,250
we need to know if it is
divisible by 2 with no remainder.

112
00:08:03,250 --> 00:08:07,355
So I'll use the remainder operator
with a number argument and 2,

113
00:08:12,627 --> 00:08:14,501
And check if that's = to 0.

114
00:08:16,407 --> 00:08:18,935
If it is 0,
the expression will be true and

115
00:08:18,935 --> 00:08:21,880
the number will be kept in the new array.

116
00:08:21,880 --> 00:08:24,745
Otherwise, the number will be discarded.

117
00:08:24,745 --> 00:08:26,820
I'll log evens to the console,

118
00:08:33,048 --> 00:08:36,150
Save and run the file.

119
00:08:37,601 --> 00:08:39,300
It works.

120
00:08:39,300 --> 00:08:40,180
Next up,

121
00:08:40,180 --> 00:08:44,640
let's have a look at how to transform
elements in an array using the map method.