Return Multiple Values from Observables in RxJS

[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 observer.next 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.