Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get RxJS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

What RxJS operators are

5:38 RxJS lesson by

We have covered the basics of what is Observable.create, and other creation functions. Now lets finally dive into operators, which are the focus of this course. We will see how operators are simple pure functions attached to the Observable type.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We have covered the basics of what is Observable.create, and other creation functions. Now lets finally dive into operators, which are the focus of this course. We will see how operators are simple pure functions attached to the Observable type.

Avatar
Jimish

I am confused when to use map and subscribe, seems like I can write the code written in subscribe in map as well, please help !!

Avatar
Andre

Jimish, have you watched the previous course on creating Observables? https://egghead.io/courses/rxjs-beyond-the-basics-creating-observables-from-scratch
A subscribe will invoke the execution of the Observable, but a map will not invoke the execution, it simply returns a new Observable. That returned Observable needs to be subscribed in order to execute. In general, we should never put side effects inside a map operator. Side effects must happen only in a subscribe. The map operator is meant simply for basic data transformation.

In reply to Jimish
Avatar
Anton Telesh

Why didn't you return the unsubscribe function from the new observable you just created? Is it for simplicity of the lesson?

Avatar
Andre

Yes Anton, for simplicity. It's important not to introduce too many concepts too quickly. This lesson focus on just one goal: how operators make chains of Observables that subscribe to each other.

In reply to Anton Telesh

The focus of this RxJS course are operators. Operators are functions attached to the observable types. There is, for instance, foo.map, foo.filter, foo.merge, foo.combineLatest. Each of these is a function, which takes a source observable as input and outputs result observable. They all look a bit like this. They take a source observable as input, and they're supposed to return a result observable. That result is calculated somehow depending on the source.

Each of these operators is a pure or immutable operation, which means that the source stays untouched. Even though the operator is attached to the source observable, for instance, when you call foo.combineLatest, foo stays completely untouched. We're not changing it. What we're getting is instead a result from this function call. That bar is now an observable which we can use or, for instance, subscribe to.

For demonstration purposes, let's make a multiply by 10 operator. It's going to depend on this foo observable. It's basically going to multiply each of these numbers by 10. Every operator is a function that takes a source observable as input, and it should return this result observable.

How do we create the result observable? We've seen that we can use Rx.Observable.create, can give the function which is a subscribe function, and the observer for that. What are we supposed to do inside here? We need to depend on the source. The only way that we can use an observable is by subscribing to it. Let's do that.

Here, we're going to the three call backs. For the next value, we want to get that value from the source, and multiply it by 10. Deliver that to the observer for this result observable. We're also going to handle errors. We're just going to simply forward them to the result. Also, we're going to handle complete.

Instead of subscribing to foo, if I call this multiply by 10 giving foo as the source, and I'll replace foo with bar, instead of one, two, three, four, five, we see 10, 20, 30, 40, and 50. Multiply by 10 is a bit of a free-standing operator. It's not actually attached to the observable type like combineLatest is. For demonstration purposes, we can also attach this multiply by 10 directly on the observable type.

This is not actually recommended to do in production or any kind of series app. Here, we're just going to monkey patch the observable type to have this multiply by 10 as an operator there.

Now, we need to do a small modification because since this is now attached to the prototype, we can get the source not as an argument, but simply as the this keyword. That's our source now.

Then, we can call multiply by 10 in a slightly different way here since it's now attached to every observable. Foo is an observable so we have there multiply by 10 available for us. It takes now arguments as we see. That's what bar is going to be. This still works.

We can take this even further a bit. We can allow some arguments here. For instance, we could allow not just multiply by 10, but multiply by any number. Then, we can provide that multiplier as an argument like this. Then, we can use that here. Then, we can give that number directly as an argument. As we can see, we can also change this from 10 to 100, and it still works.

What is going on here is that we have a chain of subscriptions. Notice that when I subscribe to bar, internally, the subscription of bar which is result will do a subscription to source which is foo in our case. It means that when we subscribe to bar, it will then trigger a subscription to foo. That's what it means to have a subscription chain because we are triggering these subscriptions upstream towards the source.

If you have many operators in chain like this, with some arguments in between, then, it means that once you subscribe to the observable that this returns, that will subscribe to this one, which will subscribe to this one, which will subscribe to that.

We saw that an operator is a function attached to each observable, which will return a new observable -- that's important to remember --leaving the source observable untouched.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?