Return Multiple Values from Observables in RxJS

André Staltz
InstructorAndré Staltz

Share this video with your friends

Send Tweet
Published 6 years ago
Updated a year ago

This lesson introduces the concept of an Observable. We will see how similar it behaves to a function and what is the fundamental difference between them.

[00:00] Now we are in JS Bin, and here we have RxJS version 5 imported. That gives us the global object Rx, which has observable. Observable is by far the most important concept in this library.

[00:13] It's important to note that it's not like an event stream, such as EventEmitter in Node.js. It's better to think of it as a powerful generalization of a function. I can explain what I mean.

[00:24] Let's make a function here called foo, which takes no arguments. Then it's just going to cause side effects such as console.log saying hello. Then it returns a value, like 42. Once you've called this function, it will immediately give you a value which we can store in a variable called X. We can also console.log that X.

[00:49] When we run this, we see hello, and 42. I'm also going to simplify this by just replacing X with the actual call of foo. Once we call foo, we get that value, and we can put it in the console.log.

[01:02] Besides that, I'm also going to do .call. Every function in JavaScript has this method called call. This does the same thing that we had before. You're probably wondering, why am I doing this now? But bear with me.

[01:16] Please note this also, that whatever's inside of here, the function, it won't happen if I don't call that function. If I comment this out and run this, nothing happens. That's because whatever is inside here is a lazy computation. Because it's lazy, it won't happen until I actually ask for it with call.

[01:39] Keep all that in mind, and let's look at observables now. Let's make an observable called bar. We are going to use the API to create observables like this, which takes a function, which takes an observer. Here inside, we're going to write almost the same thing that we had here for function. We're going to do a Console.log saying hello, and also how we need to return a value, so we do observer. Here is the next value.

[02:06] Now, observables have a method called subscribe. That takes a function which takes the value X. X is whatever was fed here through .next. Once I have that value X, I can just put it in console.log, almost the same thing we had for functions. If I run this, I see hello and 42. So far, no difference with functions.

[02:31] What happens then if I comment this out? Basically, I don't have a subscribe anymore. What will happen? Well, nothing. That means that whatever is inside an observable is also a lazy computation. Just like with functions, if you don't express your interest in the values, then nothing will happen.

[02:54] What is the difference between observables and functions? Maybe if we call subscribe twice, what happens really? Let's see. We see hello, 42, hello and 42. What happened here was duplicated for each of these calls to subscribe, so these are really independent to each other. They're not common or shared. If we try to call the function foo twice, what happens?

[03:26] As most people expect, we're calling the function twice, so we're going to see hello, 42, and hello, 42. So far, no difference. Hmm. People say sometimes that observables are asynchronous. Is that true? Let's check that. Let's first make a sanity check to see that functions are actually synchronous.

[03:48] If we put the function call between a sandwich here before and after, we expect to see before, hello, 42, and then after. We see before, hello, 42, and after. Functions are working as expected, so how do observables compare in this regard? Let's see.

[04:08] Surrounding the subscribe, I'm going to put a console.log for before, and a console.log for after. Now it's in the sandwich, so what's going to happen when I run this? Are we going to see before, after, and then after some while, hello, 42? Or are we going to see hello, 42 happening in between these? Let's check.

[04:29] We see before, hello, 42, and after. It means the observable here in this case, this bar, is completely synchronous just like the function is. So far, no difference at all. What is really the difference between observables and functions?

[04:45] Here is one major thing, is that you can call multiple times. You can give another value, so here is next 100. Here is next 200, and now we're basically returning many values.

[05:02] When we now run this, we see 42, 100, and 200, and this happens synchronously. All of these values were delivered between this before and after, which means that this is happening really all here.

[05:19] That's interesting, but observables also allow you to not just be synchronous. You can also set a timeout here which will happen after one second. Then you can deliver yet another value like 300. When we run this now, we see 100, 200, and then after one second, we saw 300.

[05:45] These values happened between the sandwich of these calls, but the value 300 was delivered after one second. That's the difference between observables and functions.

[05:58] In functions, you can't really return multiple times. That doesn't work. Also, it's kind of cheating to return an array, because still, you are returning one value, and that value is the array. The fundamental difference between functions and observables are that observables can return you multiple values.

[06:20] When you .call on a function, you're basically saying, give me a value immediately, and just one value. But when you're saying .subscribe on an observable, you're saying, give me values. I don't know, maybe they come immediately. Maybe it's just one. Maybe they are asynchronous. That is basically the difference. It's like a powerful generalization of a function.

Arnold  Krumins
Arnold Krumins
~ 6 years ago

How do you pass a value into a new Observable using Create. I see a lot of examples of .onNext(42), but how would this value be passed in?

Steve Cordrey
Steve Cordrey
~ 6 years ago

Wow. Thanks for making the comparison between functions and observables so easy to understand.

Patrick McDonald
Patrick McDonald
~ 6 years ago

Was there supposed to be further explanation regarding using the call() method? There wasn't much more said about it in this video or in the rest of the course.

André Staltz
André Staltzinstructor
~ 6 years ago

Hi Patrick. Towards the end of this video I pointed out a symmetry with functions and Observables, where .call and .subscribe are semantically equivalent. Both will invoke the lazy computation and produce value(s) that is(are) returned.

Stephen James
Stephen James
~ 5 years ago

Andre thanks for all of these videos you make RxJs interesting and I really enjoy your style of building up the information from simpler concepts.