In this lecture, we are going to learn about the filter operator for filtering values pushed from an
observable.
We can use the filter operator to stop an observable from pushing a value by setting a condition.
If the condition is not met, the observer will never receive the value.
However, this does not mean the observable has been completed.
New values can be pushed.
It's a great operator for filtering values while keeping the observable active.
In this example, we are filtering values below three.
As you can see, the first three numbers will never reach the output.
They've been ignored by the operator.
Subsequent values get pushed to the subscriber.
Let's try this operator in our project.
The map operator is one of the most versatile operators.
Since we can do anything we want with it.
For example, let's say we want to get a code from a keyboard event.
We can wrap events with an observable by using the from event operator at the top of the file.
We will update the import statement for the from event operator.
The from event operator is a creation operator.
They can be found under the Rxjs package.
Be sure to update the correct import statement.
Next, let's replace the above function with the from event function.
We are going to listen for the key down event on the document object.
The entire event object gets emitted from this observable.
We're not interested in every piece of information.
Let's chain the pipe function to filter the results.
Inside this function.
Add the map operator.
Next we will update the map function in the callback functions argument list where provided the event
object.
They returned.
Value of the function will be the event dot code property.
Pressing keys on the document will cause their codes to be logged in the console.
The example we've created will allow the observer to capture the keys.
Pressed on the document.
At the moment, the observable we've created will output every key code pressed on the document.
We may not care about most of the keys pressed except for a specific key.
Let's say we want to filter every key except the space key.
The filter operator can help us filter the other keys.
At the top of the file, we will update the import statement to include the filter operator from the
Rxjs Operators package.
Next we will add the filter operator to the pipe function.
We can add additional operators to the pipe function as arguments.
The pipe function will accept an infinite amount of arguments.
The order does matter.
The value emitted from the observable will go through each operator from top to bottom.
Therefore, the filter operator will be given the key code from the map.
Operator.
If the filter operator is the first operator in the chain, it will be given the event object inside
the filter.
Operator.
We will pass in an arrow function.
We will be given the value pushed from the previous observable.
Let's refer to it as code.
Next we need to return a boolean value.
If we return true, the value will continue in the chain until it reaches the Observer.
We don't need to return the original value.
The operator will pass on the value received from the previous operator.
On the other hand, if we return false, the filter will not emit the value.
Additional operators will not receive the value either for the return value.
Let's compare the code argument with the space key.
The letter S should be capitalized.
The key codes are case sensitive in the browser.
Try to press a key regardless of which key you press.
They shouldn't appear in the log.
The only exception is the space key.
We've successfully filtered the keys to a specific key.
The filter operator gives us the power to limit the values emitted from an observable before.
In this lecture, there's one more concept I want to go over whenever possible.
We should always strive to write multiple operators.
I've mentioned this before, but I want to reiterate this point again.
To accomplish this task, we are using two operators, one operator for retrieving the value and another
for filtering the codes.
If we wanted to, we could have written this solution with one operator.
It's inadvisable to use a single operator to perform multiple tasks.
There are a couple of downsides to doing so.
We want our operators to be as specific as possible.
Let's understand why.
Comment out the two operators we've written in the map function.
We will add the map operator to the pipeline.
Next pass in an arrow function that accepts the event object.
In the object, we will create a ternary operator.
The condition will check if the event code property is equal to the space key.
If it is, we will return the code.
Otherwise we will return null.
This time we can press keys to receive null in the console.
The space key is the only key that gets logged.
We have a similar solution to last time.
There are a couple of noticeable problems with it.
If we want to understand what's happening with the map operator, we need to study the callback function.
The map operator doesn't describe what it does besides accept and return a value.
Other developers might not be able to understand our pipeline if they were introduced to our code base.
It makes our code less readable.
Secondly, the map operator is not easily swappable if our entire logic was written inside the map.
Operator.
Swapping out operators would be difficult.
We may want to change the behavior of an observable without disrupting the whole pipeline.
Condensing our entire logic into a single operator makes this task almost impossible.
There are dozens of operators as you can continue to use Rxjs.
You'll find alternative operators that are more suitable for the job.
We don't want to be bound to a single operator.
In the next lecture we will continue our exploration of operators.