Latest Code Tutorials

What is Reactive Programming in Javascript Example

Reactive Programming in Javascript is like a sequence of events that occur in time. It is an Asynchronous Programming concept around data streams. Reactive programming is a programming paradigm for writing code, mainly concerned with asynchronous data streams. It is a programming of event streams that happens in time.

It’s time to rethink the basic Software Architecture because Conventional Programming is not satisfied with today’s modern software application requirement.

Reactive Programming in Javascript

RxJS is a JavaScript library for transforming, composing and querying asynchronous streams of data. RxJS can be used both in the browser or on the server-side using Node.js.

 Just a different way of building software apps that will “react” to changes that happen instead of the typical way of writing software where we explicitly write code (aka “imperative” programming) to handle those changes.

Dynamic Data Streams (Event Emitters)

In general programming paradigm if z = x + y at the time of declaration then z will be the sum of x and y, but after that statement, if we change the value of x and y then z will be unchanged. So no effects after that sum statement.

Example # 1


var x = 10;
var y = 20;
let z = x + y;
x = 100;
y = 200;

If you are directly running the above code in the browser, then you might face the following issue.

Possible Errors

  1. You can get any syntax errors.
  2. If you perform code directly in your browser, then chances are very high to fail the webpack compilation process.

Possible Solutions

  1.  Beginner’s Guide To Setup ES6 Development Environment  Follow this article strictly and put the above code in the main.js file

In both console report, we will get the same thing, and that is 30 and 30

The value of x and y does not affect variable z, so in Imperative Programming, The concept of Dynamic Change is missing.

Here in the example, we are using ES6 so, we need to download the ES6 version of RxJS.

npm install rxjs-es --save
import {Observable} from 'rxjs-es';
let streamA = Observable.of(3);
let streamB = => 3 * a);
streamB.subscribe(b => console.log(b));

In the console, we can see the output of 9

Now we need to specify the Dynamic Behaviour of the Streams at the Declaration of the time and not after that otherwise It will not work. So dynamic code will look like this.

import {Observable} from 'rxjs-es';
let streamA = Observable.of(3, 4); // At the time of declaration, we need to assign the dynamic behaviour.
let streamB = => 10 * a);
streamB.subscribe(b => console.log(b));

Now your new output will be 9 and 12

In Reactive Programming, everything is Streams that occur in time. A stream is a progression(sequence) of ongoing events specific to time.

Example # 2


let a = [1,2,3,4,5,6,7,8,9];
console.log(a); // [1,2,3,4,5,6,7,8,9]

It logs the array of the values, and it does not relate to kind any of time interference.


var a = [1,2,3,4,5,6,7,8,9];
var b = a.filter(x => x > 4)
        .reduce((x,y) => x + y);

Run again, you will see in console 35.

Now the above example is simple, we have just taken an array and then filter with some condition and then reduce it to the previous and next value to get the final value of b.

This article uses the environment setup of  Beginner’s Guide To Setup ES6 Development Environment this article. So, still, do not know then please check out that article and you will up and running. Now we need to add RxJS into the step forward.

Step 1: Check your package.json file

  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  "dependencies": {
    "rxjs-es": "^5.0.0-beta.12"

Now we have successfully installed the RxJS library so we can use it in this example.

Step 2: Replace the following code in main.js


import {Observable} from 'rxjs-es';
let output = Observable.interval(500)
             .map(i => [1,3,5,7,9,11][i]);
let result = => x);
result.subscribe(x => console.log(x));

Now when you again start your server than in the console, you can see like this in every 500 milliseconds.


In above code, the values are logged at some time interval in our case 500 milliseconds, which is Asynchronous Paradigm.

When the interval event is fire, we got the logged values in our console, and It is awesome right!!

We got the event streams at a particular time, and we can also apply map, filter, reduce and other array functions to the events streams.


import {Observable} from 'rxjs-es';

let output = Observable.interval(500)
             .map(i => [1,3,5,7,9,11][i]);
let result = => x)
    .filter(x => x > 5)
    .reduce((x, y) => x + y);
result.subscribe(x => console.log(x));

And we get 27 in the console.

Key Points

  1. Reactive Programming allows you to set Dynamic Behaviour only at Declaration Time.
  2. Reactive Programming is different from Imperative programming because as the name suggests it reacts when something in our application is occurring or done.
  3. It relies on Asynchronous Nature that happens in time.
  4. It stays responsive in the case of Failure and Success.
  5. In the Reactive world, we can not wait on something happen to the program, we need to continue the execution, and if something happens, we need to React to it. That is what the Async Pattern is.

Finally, Reactive Programming in Javascript tutorial example is over.

If you still have any doubt then ask in a comment below, I am happy to help you out.

1 Comment
  1. Qamar Ali says

    Hey thank you for this great article. Make mu mide more clear on javascript reactivity

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.