Stream of values/data in Javascript

In this article, we’re going to understand one of the first core notions of RxJs which is the Stream of values with easy examples.

The notion of Stream of values. Many times people dive straight into the notion of observables without understanding the notion of stream of values first.

But this is the best starting point for understanding RxJs.

Let’s cover then, what is a Stream?

And we’re going to understand all that with help of several examples.

As you know, in JavaScript, everything almost is asynchronous.

1. We have requests coming from the network, bringing us new values from the backend.
2. We have timeouts occurring in the front end.
3. We have user interaction with click and mouseover events.
4. etc…

All of those are asynchronous events that we need to combine to produce the final result of our program or the final product.

Enough of theory, let’s see a couple of examples of Stream of value now.

Ex-1: We often find intervals in JavaScript programs. So this is code that is periodically executed by the JS runtime to perform a certain task, like, an application doing long-polling in the background.

Or for keeping this example easy, let’s say we’re logging a counter every second.

Stream creation using setInterval

Let’s have a look at what this new stream of values looks like in the console

Output for example 1 (setInterval stream)

In the above example, we have here an interval that is emitting a new value over time. To be more specific, we've created a stream of values and the interval is feeding a new value to that stream over time.

Bonus: If you wanna visualise what a stream of interval function will look like, you’re in luck. Here’s is a visual example of this that may help you understand a stream in real life.

Ex-2: Every click that you do in an application will be a stream of values containing the click event.

Stream creation with click event

In this example, to make it simple, we are going to detect here the whole document and we are going to detect here a stream of clicks anywhere on the page. Also, we’ve subscribed to the click event via the callback function and we are going to open the console so that we see the stream of events when we click anywhere on the page.

The output of example 2 (click event stream)

we are seeing that we have here a series of events being printed out to the screen.

So what we see here whenever we click on the mouse is an example of a stream of values that are being emitted over time.

Ex-3: This example is very similar to what happens in the case of an HTTP request, which is calling a setTimeout function. setTimeout is a very common async function that we can find in all the JS applications. And we might not think of this operation as a stream, but this is indeed a special type of stream. It’s a stream that only meets one value and then completes.

So let’s create here a timeout that is going to be triggered after three seconds.

Stream creation with setTimeout

So unlike the previous stream, setInterval this stream only contains one value, even though it only meets one value. It’s still an example of a stream.

And in fact, setTimeout is very similar to a request to the backend that gives us back a value after the request has been completed via a callback. So it’s not that different from an Ajax request, with the exception that it cannot go wrong.

We are going to open the console and we’re going to see that after three seconds it emits the logged value to the stream.

The output of example 3 (setTimeout stream)

Indeed, we have here this value that got emitted and the stream is completed, meaning it will never emit a new value again.

However, as you see in the above image the setInterval stream is still emitting values constantly, and the click stream here is still active and will continue to emit clicks as we click on the page.

So we can say Example 1 & 2 are multi value streams because they continue to emit values over time and they will never complete.

But Example 3 is single value stream because it emitted the value once and completed.

So that’s an important notion. Now that we have understood the most essential notion of RxJs, which is the notion of stream of values.

Let’s now introduce RxJs, Let’s learn why it’s called RxJs and what is its main use case in my next article.

TL;DR — Streams are a sequence of values over time, that’s it.

For example, a number that goes up by 1 every second might have a stream that looks like[0,1,2,3,4]

Another stream might be a sequence of x and y positions of mouse click events, like so:[(12,34), (345,22), (1,993)]