Check out a free preview of the full Advanced Asynchronous JavaScript course

The "Filter() for Observables" Lesson is part of the full, Advanced Asynchronous JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

After demonstrating map() function, Jafar uses the filter() function to show how to build operators over an observable.

Preview
Close

Transcript from the "Filter() for Observables" Lesson

[00:00:00]
>> Jafar Husain: So we've written map, I wanna do one more function here just to drive home building operators over observable. And then we're gonna move in some problem solving with observable. My second favorite, maybe 3rd, 4th favorite after map is filter. Filter, can anybody help me write filter, I'm actually just gonna copy and paste map, because they're very, very similar.

[00:00:29]
>> Jafar Husain: So let's say I want to modify our program here, and I'm only interested when the offset x is larger than 10.
>> Jafar Husain: Make sense? Questions?
>> Jafar Husain: So,
>> Jafar Husain: Let's write our filter function.
>> Jafar Husain: So it starts out much the same way, in fact all of this is going to be the same except what happens inside of next.

[00:01:01]
Anybody wanna help me out here, how am I gonna implement filter?
>> Speaker 2: We can call the predicate within an if statement and pass the value.
>> Jafar Husain: So, if and only if my test function, my predicate succeeds on the value, will I forward that value to next guy, all right?

[00:01:26]
>> Jafar Husain: And now we have filter.
>> Jafar Husain: So I'm gonna go ahead and we're gonna run this, and then see what happen, op, that didn't work.
>> Jafar Husain: Uh-oh, see what happens when I'm near the top left of that button and I'm clicking? I'm within ten of the X and so therefore it gets filtered out, but as soon as I move out here,

[00:01:58]
>> Jafar Husain: So we built a little rx, guys. So hopefully now we have the solid understanding of observable, how it really works from the bottom up. I'm gonna keep this implementation around, we might even come and add to it later on as we instruct each other on how these various operators work.

[00:02:15]
Thanks very much. So that's the end of this section in which we create a minimal observable.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now