Reactive Extensions are everywhere – I wanted to try the JavaScript version of the library, so below is a sample React component demonstrating a “fake” service call that might occur within the fetch function. The setTimeout is used simply to simulate some latency in the call.

To add rxjs simple use

yarn add rxjs

Now here’s the sample component code…

import {Observable, Subscriber, Subscription} from 'rxjs';

interface ServiceState {
  data: string;
}

class ServiceComponent extends Component<{}, ServiceState> {

  _subscription!: Subscription;

  constructor(prop: any) {
    super(prop);
    this.state = {
      data : "Busy"
    };
  }

  fetch() : Observable<string> {
    return Observable.create((o: Observer<string>) => {
      setTimeout(() => {
        o.next('Some data');
        o.complete();
      }, 3000);
    });
  }

  componentDidMount() {
    this._subscription = this.fetch().subscribe(s => {
      this.setState({data: s})
    });
  }

  componentWillUnmount() {
    if(this._subscription) {
      this._subscription.unsubscribe();
    }
  }  

  render() {
    return (
      <div>{this.state.data}</div>
    );
  }
}

In this example we have the fetch function returns an instance of an Observable of type string. We then subscribe to this within the componentDidMount function, which is called when the component is inserted into the DOM and then we subscribe to the Observable, updates will be applied to the component’s state.

The componentWillUnmount is called when the component is removed from the DOM and hence we unsubscribe from the Observable.

In JavaScript everything is an object from the obvious, such as arrays, strings etc. through to functions.

So how do we handle encapsulation such that we will have private and public data and methods ?

Well, because functions are themselves objects we can declare private data internally (within the function) and then using the prototype property we can add methods to the function that are public.

Below is a very simple example of encapsulation. The variable balance is private as it’s declared within the scope of the BankAccount function.

function BankAccount() {
   var balance = 0;

   BankAccount.prototype.add = function(amount) {
      balance += amount;
   }

   BankAccount.prototype.subtract = function(amount) {
      balance -= amount;
   }

   BankAccount.prototype.getBalance = function() {
      return balance;
   }
};

The functions add, subtract and getBalance are public and thus we can interact with this object using the following

var bankAccount = new BankAccount();
bankAccount.add(100);
bankAccount.subtract(10);

var current = bankAccount.getBalance();

If we wanted to make the balance variable public, we could simply alter the var balance = 0 to this.balance = 0 but of course this allows us to change the balance variable without going through the add/subtract methods.

To implement a more property like variable (as per C# for example) whereby we have methods to get/set the property we might look to implement something like

function BankAccount() {
   var balance = 0;

   this.__defineSetter__("balance", function(x) {});
   this.__defineGetter__("balance", function() { return balance; });
   
   // rest of the methods as before
};

Here we define a getter such that we can access in this way bankAccount.balance but we’ve defined a setter that does nothing so whilst a setter exists it doesn’t alter the balance.

Properties and Methods

JavaScript is a dynamic language. We do not need to declare properties or methods on an object prior to using them, for example the following will automatically add a new property and method to an object

var o = new Object();
o.Message = "Clicked";
o.Clicked = function() {
   alert(this.Message);
}

So in the above code we create an instance of an Object and then by calling o.Message we basically add a new property to the object o. Next we create a method on the object. Note: We need to use “this” to access the property from within the method otherwise the code tries to access an undefined variable.

We can actually add properties and methods as well as access them using indexer notation, for example

var o = new Object();
o["Message"] = "Hello";

and this allows us to even call methods dynamically such as

var clicked = "Clicked";

var o = new Object();
   o["Message"] = "Clicked";
   o["Clicked"] = function() {
      alert(this["Message"]);
   }


   o[clicked]();

So in the above we can dynamically change the method called (assuming we had more than one method).

We can also iterate over the members of an object using the following

var o = new Object();
   o["Message"] = "Clicked";
   o["Clicked"] = function() {
      var s = "";
      // iterate over the object
      for(var p in o)
      {
         s = s + p + ";"
      }
      alert(s);
   }

Using the for..in loop we simply iterate over and object, the string “s” will be “Message;Clicked”.

Finally, we can add properties and methods, but we can also delete them using

delete o.Message;

This deletes the Message property from the object o.

Types

JavaScript is loosely types. We declare variables using the var keyword and a variable can change type at any time, for example

var tmp = 3.1415926;
tmp = "Hello";

The runtime will not complain about the type conversion from a floating point number to a string.

JavaScript has a small number of types which include, string, number, boolean, array and object.

• A string may be declared using either double quotes or single quotes, obviously this helps when the string is declare inline.
• A number can be declared with or without decimal places (in other words it can be floating point or an integer).
• A boolean may be true or false (as one would expect)
• An array can be declared in various ways (described later) and can store heterogeneous data types
• An object can be declared and properties and methods assigned to it (see above)

If a var is not assigned a value it is “undefined” (which is itself a type), basically this is a variable that has no value, but we can also use null to denote an “empty” value.

Declaring Arrays

Arrays can be declared in various ways, for the first example we declare an array and then we dynamically add items by creating an index to them

var vowels = new Array();
vowels[0] = "a";
vowels[1] = "e";
vowels[2] = "i";
vowels[3] = "o";
vowels[4] = "u";

A couple of alternatives are

var vowels1 = new Array("a", "e", "i", "o", "u");
var vowels2 = ["a", "e", "i", "o", "u"];

How to use JavaScript in an HTML file

JavaScript is a dynamic loosely typed language which is now the lingua franca of the browser now.

We can add JavaScript to a web page as inline, embedded or in an external .js file. For example

Inline

<input type="button" value="Click Me!" onClick="alert('Clicked');" />

In the above the inline JavaScript will display an alter in response to the button being clicked.

Embedded

The same code as above but with the JavaScript embedded would look more like

<script>
function clicked() {
   alert('Clicked');
}
</script>

<input type="button" value="Click Me!" onClick="clicked();" />

I’ve removed superfluous code but the usual place to put the script is in the section.

External File

If we have a file name (for example) scripts.js then we’d place the scripting code in that file as below

function clicked() {
   alert('Clicked');
}

and in the of the HTML file we’d have the reference to the script

<script type="text/javascript" language="javascript" src="scripts.js"></script>