Difference Between Subject, Behavior Subject And Replay Subject

Data Emission and Multicasting Using Subjects

The subject is a special observable which can emit data. Data emission is the main concept associated with the subjects. Subjects have the next() method to push data whereas a regular observable doesn't have the next() method. Multicasting is the other advantage. We can have multiple subscribers and data can be sent to all in one shot using the subject as an observer. Subjects have the list of subscribers maintained with it.
  • Subjects are active objects. We can subscribe to them and call the next() method from outside. 
  • Subjects can use observable operators.
  • Subjects are used for multicasting data to multiple subscribers.
  • Pushing data is simple with subjects using the next() method. All the listeners of the subject receive the data.

Different Types Of Subjects

We will see an example of how data is pushed to the subscriptions and the use of the next() method. 

const mySub = new Subject();

mySub.next(1);
const subscription1 = mySub.subscribe(x => {
    console.log('From subscription 1:', x);
  });

mySub.next(2);

const subscription2 = mySub.subscribe(x => {
  console.log('From subscription 2:', x);
});

mySub.next(3);
mySub.next(4);

The output will be as follows:

From subscription 1: 2
From subscription 1: 3
From subscription 2: 3
From subscription 1: 4
From subscription 2: 4

We have seen that some data got missed from the pushed data as the subscriptions came after the pushed data. We can manage this missed data using Behavior Subject and Replay Subject.

Replay Subjects

The subscriptions which are subscribed later, they will miss some pushed data that were emitted before in case of subjects. Replay subjects manage this lost data by keeping a buffer of the previously emitted values.
We can even define the number of how much previous values we want to buffer. In the above example, we will use Replay Subject instead of regular Subject and see the output:

const mySub = new ReplaySubject(1); // We have specified 1 to keep one value as a buffer

mySub.next(1);
const subscription1 = mySub.subscribe(x => {
    console.log('From subscription 1:', x);
  });

mySub.next(2);

const subscription2 = mySub.subscribe(x => {
  console.log('From subscription 2:', x);
});

mySub.next(3);
mySub.next(4);

The output of the above:

From subscription 1: 1
From subscription 1: 2
From subscription 2: 2
From subscription 1: 3
From subscription 2: 3
From subscription 1: 4
From subscription 2: 4

Now we can see that both the subscriptions have one previously emitted value using Replay Subjects.

Behavior Subjects

Behavior subject emits the last emitted value rather than all the previous emitted values. A default value can be emitted using Behavior subjects when we don't have any previous emitted value.

const mySub = new BehaviorSubject("Hello Behavior Subject");

const subscription1 = mySub.subscribe(x => {
    console.log('From subscription 1:', x);
  });

mySub.next("First Value");

const subscription2 = mySub.subscribe(x => {
  console.log('From subscription 2:', x);
});


mySub.next(3);

The output will be:

From subscription 1: Hello Behavior Subject
From subscription 1: First Value
From subscription 2: First Value
From subscription 1: 3
From subscription 2: 3

Now if we can see that default value "Hello Behavior Subject" is emitted for subscription1 because we don't have any previous emitted value for that subscription.

Comments