Difference between Subject and BehaviorSubject

Before stepping into the differences, first let us know what Subject and BehaviorSubject actually are? With RxJS coming into the picture, Angular became much more asynchronous. Let us discuss with asynchronous is.

To display users data when ever the user logged in, We need to get the users data from internet or server or some where else which is not available in the application. To do that we are making some HttpRequest to the server asking for it. Thus we don't know how long it will take to get the data. The response didn't come synchronously or line after line of code, instead it will be available when ever it comes. It is called asynchronous.

To get the asynchronous data, there is a tool called Observable which is provided by RxJS library. It is a collection of objects overtime that we use to contain data retrieved from asynchronous calls. It works on subscription basis, same as Netflix and Amazon. If we subscribe to an observable, then we can get the data that the observable have and also it will be updated when new data is available. If we unsubscribe it, then we can't see or get the data and also can't update the existing data.

const source = new BehaviorSubject<string>('');
source.next('hi')
source.next('hello')
source.subscribe(x=>
  console.log(x)
)

output will be:

hi
hello

For every new value updated in the source, it will be display in the output console until the source was unsubscribed.

Both Subject and BehaviorSubject are Observables. Let us know more about each observable with simple example.

Subject

From the below example you can see, we have a Subject called mySubject and it has three subscribers.

const mySubject = new Subject<number>();
mySubject.subscribe({
  next: (z) => console.log('a');
});
mySubject.subscribe({
  next: (z) => console.log('b');
});
mySubject.next(1)
mySubject.next(2)

mySubject.subscribe({
  next: (z) => console.log('c');
});

mySubject.next(3)

• First we are assigning value 1 to mySubject using mySubject.next(1), Where it will call both subscribers and in the console it will print a and b.
• Second we are assigning value 2 to mySubject using mySubject.next(2), Where it will call both subscribers and in the console it will print a and b.
• Then we created another subscriber to mySubject. Later by assigning 3 to mySubject using mySubject.next(3), It will call all three subscribers and in console it will print a,b and c.
• Output in the console will be

a
b
a
b
a
b
c

Now you know how the subject works, let us also know how BehaviorSubject works.

BehaviorSubject

It also has same syntax as Subject. But with the BehaviorSubject you can get the current value on Subscription. Whenever if you subscribe using the observable, it will immediately retrieves the current value. Lets understand with a small example.

var behariorSubject = new BehaviorSubject<number>(0);
behariorSubject.subscribe({
  next: (z) => console.log('observerA: ' + z) 
});

behariorSubject.next(1);  

behariorSubject.next(2);   

behariorSubject.subscribe({
  next: (z) => console.log('observerB: ' + z)  
});

behariorSubject.next(3);

In the above example we have a behaviourSubject with two subscribers and assigning three values. Irrespective of when it is subscribed, all the subscribers get the latest values of the behaviorSubject.
Output in the console will be

observerA: 0
observerA: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

Subject Vs BehaviorSubject

Now you know how both Subject and BehaviorSubject works. The main problem you get is that when can we use Subject and when can we use BehaviorSubject. By knowing the difference between them you can get idea when to use which observable.

Values they hold

If you subscribe to a Subject, we wont get current value or initial value.
But when you subscirbe to a BehaviorSubject, you will get the current or initial value.

Initial Value

For Subject, we don't need to initial a value.
But whenever we declare BehaviorSubject we need to initialize a default value.

Subscribers

In Subject, the subscribers will only receive the upcoming value.
In BehaviorSubject, the subscribers will receive the previous value and also upcoming value.

Conclusion

These are some of the key differences between Subject and BehaviorSubject. You can learn more about observables if you visit this link.

Happy Coding...