Reactive programming is getting a lot of focus lately. This idea is relatively new and, like many new ideas, has lots of confusing, and sometimes contradictory information floating around. We discussed asynchronous programming earlier in this book. JavaScript takes asynchronous programming to new heights by providing first class language constructs that support it.

Reactive programming is essentially programming with asynchronous event streams. An event stream is a sequence of events happening over time. Consider the following diagram:

In the preceding diagram, time passes from left to right and different events occur over time. As the event happens over time, we can add an event listener to this whole sequence. Whenever an event happens, we can react to it by doing something.

Another type of sequence in JavaScript is an array. For example, consider the following lines of code:

    var arr = [1,1,13,'Rx',0,0]; 
    console.log(arr); 
    >>> [1, 1, 13, "Rx", 0, 0] 

In this case, the entire sequence lives in memory at the same time. However, in case of event stream, events happen over time and there is no state at this point of time. Consider the following lines of code:

    var arr = Rx.Observable.interval(500).take(9).map(
      a=>[1,1,13,'Rx',0,0][a]); 
    var result = arr; 
    result.subscribe(x=>console.log(x)); 

Don't worry too much about what is going on in this example just yet. Here, events are happening over time. Instead of having a fixed bunch of elements in an array, here they are happening over time, after 500 ms.

We will add an event listener to the arr event stream, and when an event happens, we will print the element on console. You can see a similarity between the methods in arrays and the event streams. Now, to expand on this similarity, let's say, you want to filter all non-numbers from this list. You can use the map function to this event stream, just like you would use it on an array, and then you would want to filter the results to show only integers. Consider the following lines of code:

    var arr = [1,1,13,'Rx',0,0]; 
    var result = arr.map(x => parseInt(x)).filter(x => !isNan(x)); 
    console.log(result); 

Interestingly, the same methods work for event streams as well. Take a look at the following code example:

    var arr = Rx.Observable.interval(500).take(9).map(
      a=>[1,1,13,'Rx',0,0][a]); 
    var result = arr.map(x => parseInt(x)).filter(x => !isNaN(x)); 
    result.subscribe(x=>console.log(x)); 

These are simpler examples just to make sure you start seeing how event streams flow over time. Please don't bother about the syntax and construct just yet. Before we can look at them, we will need to make sure we understand how to think in reactive programming. Event streams are fundamental to reactive programming; they allow you to define the dynamic behavior of a value at declaration time (definition taken from Andre Staltz's blog).

Let's say you have an a variable, which has initially the value 3. Then, you have a b variable, which is 10 * a. If we console log out b, we will see 30. Consider the following lines of code:

    let a = 3; 
    let b = a * 10; 
    console.log(b); //30 
    a = 4; 
    console.log(b); // Still 30 

We know the result is very straightforward. When we change the value of a to 4, the value of b will not change. This is how static declaration works. When we talk about reactive programming and event streams, this is the area where people find difficulty in understanding how events flow. Ideally, we want to create a formula, b=a*10, and over time, whenever the value of a changes, the changed value is reflected in the formula.

That is what we can accomplish with event streams. Let's say a is an event stream of just the value 3. Then, we have streamB, which is streamA mapped. Each of these a values will be mapped to 10 * a.

If we add an event listener to that streamB, and we console log, we will see b being 30. Take a look at the following example:

    var streamA = Rx.Observable.of(3, 4); 
    var streamB = streamA.map(a => 10 * a); 
    streamB.subscribe(b => console.log(b)); 

If we do this, we have an event stream that simply has just two events. It has event 3, and then it has event 4, and b will change accordingly whenever a changes. If we run this, we see b being 30 and 40.

Now that we have spent some time in getting the basics of reactive programming sorted, you may ask the following question.