1
00:00:00,110 --> 00:00:06,260
In this lecture, we are going to learn about the filter operator for filtering values pushed from an

2
00:00:06,260 --> 00:00:07,170
observable.

3
00:00:07,190 --> 00:00:13,910
We can use the filter operator to stop an observable from pushing a value by setting a condition.

4
00:00:13,940 --> 00:00:18,860
If the condition is not met, the observer will never receive the value.

5
00:00:18,890 --> 00:00:23,100
However, this does not mean the observable has been completed.

6
00:00:23,120 --> 00:00:25,250
New values can be pushed.

7
00:00:25,280 --> 00:00:30,770
It's a great operator for filtering values while keeping the observable active.

8
00:00:30,800 --> 00:00:34,700
In this example, we are filtering values below three.

9
00:00:34,730 --> 00:00:38,990
As you can see, the first three numbers will never reach the output.

10
00:00:39,020 --> 00:00:41,460
They've been ignored by the operator.

11
00:00:41,480 --> 00:00:44,840
Subsequent values get pushed to the subscriber.

12
00:00:44,870 --> 00:00:47,900
Let's try this operator in our project.

13
00:00:49,480 --> 00:00:53,410
The map operator is one of the most versatile operators.

14
00:00:53,410 --> 00:00:55,830
Since we can do anything we want with it.

15
00:00:55,840 --> 00:01:00,730
For example, let's say we want to get a code from a keyboard event.

16
00:01:00,760 --> 00:01:07,540
We can wrap events with an observable by using the from event operator at the top of the file.

17
00:01:07,540 --> 00:01:12,160
We will update the import statement for the from event operator.

18
00:01:14,490 --> 00:01:18,270
The from event operator is a creation operator.

19
00:01:18,300 --> 00:01:21,870
They can be found under the Rxjs package.

20
00:01:21,900 --> 00:01:25,200
Be sure to update the correct import statement.

21
00:01:25,230 --> 00:01:30,600
Next, let's replace the above function with the from event function.

22
00:01:32,830 --> 00:01:38,110
We are going to listen for the key down event on the document object.

23
00:01:40,190 --> 00:01:44,260
The entire event object gets emitted from this observable.

24
00:01:44,270 --> 00:01:47,390
We're not interested in every piece of information.

25
00:01:47,390 --> 00:01:51,320
Let's chain the pipe function to filter the results.

26
00:01:53,210 --> 00:01:54,800
Inside this function.

27
00:01:54,800 --> 00:01:56,660
Add the map operator.

28
00:01:58,620 --> 00:02:06,090
Next we will update the map function in the callback functions argument list where provided the event

29
00:02:06,090 --> 00:02:06,960
object.

30
00:02:09,090 --> 00:02:10,050
They returned.

31
00:02:10,050 --> 00:02:14,400
Value of the function will be the event dot code property.

32
00:02:16,630 --> 00:02:21,610
Pressing keys on the document will cause their codes to be logged in the console.

33
00:02:21,640 --> 00:02:26,230
The example we've created will allow the observer to capture the keys.

34
00:02:26,230 --> 00:02:27,990
Pressed on the document.

35
00:02:28,000 --> 00:02:34,450
At the moment, the observable we've created will output every key code pressed on the document.

36
00:02:34,480 --> 00:02:39,190
We may not care about most of the keys pressed except for a specific key.

37
00:02:39,220 --> 00:02:43,360
Let's say we want to filter every key except the space key.

38
00:02:43,390 --> 00:02:47,260
The filter operator can help us filter the other keys.

39
00:02:47,290 --> 00:02:53,500
At the top of the file, we will update the import statement to include the filter operator from the

40
00:02:53,590 --> 00:02:56,560
Rxjs Operators package.

41
00:02:58,540 --> 00:03:03,310
Next we will add the filter operator to the pipe function.

42
00:03:05,490 --> 00:03:10,140
We can add additional operators to the pipe function as arguments.

43
00:03:10,170 --> 00:03:14,190
The pipe function will accept an infinite amount of arguments.

44
00:03:14,220 --> 00:03:15,900
The order does matter.

45
00:03:15,930 --> 00:03:21,670
The value emitted from the observable will go through each operator from top to bottom.

46
00:03:21,690 --> 00:03:26,640
Therefore, the filter operator will be given the key code from the map.

47
00:03:26,670 --> 00:03:27,470
Operator.

48
00:03:27,480 --> 00:03:34,890
If the filter operator is the first operator in the chain, it will be given the event object inside

49
00:03:34,890 --> 00:03:35,490
the filter.

50
00:03:35,490 --> 00:03:36,300
Operator.

51
00:03:36,300 --> 00:03:38,630
We will pass in an arrow function.

52
00:03:38,640 --> 00:03:42,780
We will be given the value pushed from the previous observable.

53
00:03:42,780 --> 00:03:45,210
Let's refer to it as code.

54
00:03:47,300 --> 00:03:50,870
Next we need to return a boolean value.

55
00:03:50,900 --> 00:03:56,780
If we return true, the value will continue in the chain until it reaches the Observer.

56
00:03:56,810 --> 00:03:59,730
We don't need to return the original value.

57
00:03:59,750 --> 00:04:05,150
The operator will pass on the value received from the previous operator.

58
00:04:05,180 --> 00:04:10,730
On the other hand, if we return false, the filter will not emit the value.

59
00:04:10,760 --> 00:04:15,920
Additional operators will not receive the value either for the return value.

60
00:04:15,950 --> 00:04:19,670
Let's compare the code argument with the space key.

61
00:04:21,899 --> 00:04:24,510
The letter S should be capitalized.

62
00:04:24,540 --> 00:04:28,080
The key codes are case sensitive in the browser.

63
00:04:28,080 --> 00:04:32,010
Try to press a key regardless of which key you press.

64
00:04:32,010 --> 00:04:34,230
They shouldn't appear in the log.

65
00:04:34,230 --> 00:04:36,990
The only exception is the space key.

66
00:04:37,020 --> 00:04:41,130
We've successfully filtered the keys to a specific key.

67
00:04:41,160 --> 00:04:47,970
The filter operator gives us the power to limit the values emitted from an observable before.

68
00:04:48,090 --> 00:04:53,370
In this lecture, there's one more concept I want to go over whenever possible.

69
00:04:53,370 --> 00:04:57,240
We should always strive to write multiple operators.

70
00:04:57,270 --> 00:05:01,530
I've mentioned this before, but I want to reiterate this point again.

71
00:05:01,560 --> 00:05:09,240
To accomplish this task, we are using two operators, one operator for retrieving the value and another

72
00:05:09,240 --> 00:05:11,160
for filtering the codes.

73
00:05:11,190 --> 00:05:16,320
If we wanted to, we could have written this solution with one operator.

74
00:05:16,320 --> 00:05:21,670
It's inadvisable to use a single operator to perform multiple tasks.

75
00:05:21,670 --> 00:05:24,580
There are a couple of downsides to doing so.

76
00:05:24,580 --> 00:05:28,660
We want our operators to be as specific as possible.

77
00:05:28,660 --> 00:05:30,340
Let's understand why.

78
00:05:30,370 --> 00:05:34,510
Comment out the two operators we've written in the map function.

79
00:05:36,470 --> 00:05:40,070
We will add the map operator to the pipeline.

80
00:05:42,170 --> 00:05:46,970
Next pass in an arrow function that accepts the event object.

81
00:05:48,920 --> 00:05:52,730
In the object, we will create a ternary operator.

82
00:05:52,760 --> 00:05:58,520
The condition will check if the event code property is equal to the space key.

83
00:06:00,610 --> 00:06:03,260
If it is, we will return the code.

84
00:06:03,280 --> 00:06:06,070
Otherwise we will return null.

85
00:06:08,940 --> 00:06:13,500
This time we can press keys to receive null in the console.

86
00:06:13,530 --> 00:06:17,070
The space key is the only key that gets logged.

87
00:06:17,100 --> 00:06:19,890
We have a similar solution to last time.

88
00:06:19,890 --> 00:06:23,010
There are a couple of noticeable problems with it.

89
00:06:23,040 --> 00:06:29,340
If we want to understand what's happening with the map operator, we need to study the callback function.

90
00:06:29,370 --> 00:06:35,430
The map operator doesn't describe what it does besides accept and return a value.

91
00:06:35,460 --> 00:06:41,970
Other developers might not be able to understand our pipeline if they were introduced to our code base.

92
00:06:42,000 --> 00:06:44,340
It makes our code less readable.

93
00:06:44,430 --> 00:06:52,140
Secondly, the map operator is not easily swappable if our entire logic was written inside the map.

94
00:06:52,170 --> 00:06:53,040
Operator.

95
00:06:53,070 --> 00:06:55,920
Swapping out operators would be difficult.

96
00:06:55,950 --> 00:07:01,960
We may want to change the behavior of an observable without disrupting the whole pipeline.

97
00:07:01,980 --> 00:07:08,460
Condensing our entire logic into a single operator makes this task almost impossible.

98
00:07:08,680 --> 00:07:13,810
There are dozens of operators as you can continue to use Rxjs.

99
00:07:13,840 --> 00:07:18,250
You'll find alternative operators that are more suitable for the job.

100
00:07:18,250 --> 00:07:21,400
We don't want to be bound to a single operator.

101
00:07:21,430 --> 00:07:26,770
In the next lecture we will continue our exploration of operators.