Difference between Subject and Behaviour Subject in RxJS

RxJS is a library which is used for composing asynchronous and event based programs using observables. The main use of RxJS is observables where you can subscribe to an respective event using Subject, BehvaiourSubject, Observer etc. This library is one of the most used library with angular applications.

To use RxJS in your respective angular application you need to install this in your angular project using the below npm command.

npm install rxjs

The above command will install the rxjs into your respective angular application. The latest stable version of rxjs is 6.5.3.

Subject

An RxJS subject is also an special type of Observable that allows the respective values to be subscribed among the observers. Observable is the most basic implementation of listening to data changes, but BehaviorSubject and Subject makes it very simpler in RxJS.

Let us an see an small example of how this Subject works in RxJS.

app.component.ts

import { Subject } from 'rxjs';
const mySubject = new Subject<number>(); 
mySubject.subscribe({
  next: (v) => console.log(1)
});

mySubject.subscribe({
  next: (v) => console.log(2)
});
 
mySubject.next(1);
mySubject.next(2);

mySubject.subscribe({
  next: (v) => console.log(3)
});
 
 mySubject.next(3);

On the above code snippet you can see, we have an subject called mySubject and it has two subscribers.

• First we are assigning value as 1 using mySubject.next(1) where it will call both subscribers and in the console it will print 1 and 2.
• Second we are assigning a value as 2 using mySubject.next(2) where it will call both subscribers and in the console it will print 1 and 2.
• And then again we have an subscriber by assigning a value as 3 using mySubject.next(3) but now we have three subscribers and it will print 1,2 and 3.
• So the output in the console will be,

BehaviorSubject

Using Behavior Subject you can get the current value on the initial value on Subscription. And whenever if you subscribe using the observable, it will immediately retrieves the current value.

Let us see an small example of how to create an BehvaiorSubject in RxJS

app.component.ts

import { BehaviorSubject } from 'rxjs';
var subject = new BehaviorSubject<number>(0);  
// 0 is the initial value

subject.subscribe({
  next: (v) => console.log('observerA: ' + v)  
// output initial value, 
then new values on `next` triggers
});

subject.next(1);  
// output new value 1 for 'observer A'

subject.next(2);  
// output new value 2 for 'observer A', 
current value 2 for 'Observer B' on subscription

subject.subscribe({
  next: (v) => console.log('observerB: ' + v)  
// output current value 2, 
then new values on `next` triggers
});

subject.next(3);

So on the above code snippet we have two subscribers and we are assigning three values. Basically all the subscribers will output the current value and then it gives the new value on the next triggers.

Hope the comments on the above snippet will give an better understanding. So the output in the console will be,

Subject vs BehvaiorSubject

We have seen how we can create and use Subject and Behavior Subject in our angular applications. So what’s the actual difference between them. So when can we use Subject and when can we go for Behavior Subject. We shall see some differences between them.

Holding Values

If you subscribe to an subject, you won’t get the current value or initial value.

But when you subscribe to an Behavior Subject, you will be able to get the current value or the initial value.

Defining Values

You don’t have to define a default value whenever you declare the subject.

But you have to define a default value whenever you declare Behavior Subject based upon the data type.

Subscribers

In Subject, each next subscribers receive only the upcoming values.

In Behavior Subject, each next subscribers receive one previous value and upcoming values.

Observable

Observable is a Generic, and Behavior Subject is technically a sub–type of Observable because BehaviorSubject is an observable with specific qualities.

And when it comes to Subject and Observable is that a Subject has state, it keeps a list of observers. On the other hand, an observable is just a function that sets up observation.

Reusablity

Both Subject and BehaviorSubject cannot be reused once you unsubscribe the respective Subject.

Conclusion

These are some of the key differences between the Subject and Behavior Subject. It totally depends upon your requirements of using the respective Subject. RxJS has lot of Subjects like ReplaySubject, AsyncSubject and Behavior Subject. To know more about RxJS subject visit this link.

In our next blog, we will explore about how we can create and publish npm packages in Angular.

Happy Coding!

Cheers! 🙂