Difference between Subject and BehaviorSubject

The way to difference a Subject and BehaviorSubject is: Subjects have no initial value.  While BehaviorSubject have some default/initial value. Subscribers will only be notified and receive events/values after the subscription is made – i.e., Subscribers will not receive the last emitted value upon subscription with Subject. While with BehaviorSubject, Subscriber will receive the last emitted value upon subscription

Subject

Subjects fall under the category of Observable. The next() function allows Subjects, unlike an Observable, to send events and values to their subscribers. As a result, you can use subscribe() to subscribe to changes and publish changes (using next()) to a Subject. You can also cast Subjects to an Observable for instances where you want to conceal the Subject-like behavior and only expose the ability to subscribe to changes.

The way to difference between Subject and BehaviorSubject is:

1. Subjects have no initial value.
2. Subscribers will only be notified and receive events/values after the subscription is made – i.e., Subscribers will not receive the last emitted value upon subscription.

e.g., say we want to use Subjects to notify subscribers when an event has occurred:

import { Subject } from 'rxjs';

const subject = new Subject();

subject.next('event 0');

subject.subscribe(event => console.log(event));

subject.next('event 1');
subject.next('event 2'); 
subject.next('event 3'); 

/**  
* Expected output:
* event 1 
* event 2 
* event 3
*/

Since event 0 was emitted before the subscription was made, the subscriber will not receive that value. If the use case for a subject requires the Subject to emit that initial value, a BehaviorSubject would be a better choice.

BehaviorSubject

BehaviorSubject are a type of Subject that:

1. Has an initial value.
2. Subscribers will receive the last emitted value upon subscription.

Using the same code as we used for the Subject, but using a BehaviorSubject instead, we will see now that the ‘event 0’ will be emitted. Also, notice how we must add an initial value (‘event -1’) upon creation of the BehaviorSubject.

<meta charset='utf-8'>import { Subject } from 'rxjs';

const behaviorSubject = new BehaviorSubject('event -1'); 
 
behaviorSubject.next('event 0');

behaviorSubject.subscribe(event => console.log(event));

behaviorSubject.next('event 1');
behaviorSubject.next('event 2');
behaviorSubject.next('event 3');

/**
Expected output:
* event 0  
* event 1 
* event 2 
* event 3
*/

When should you use Subject and BehaviorSubject?

Subjects are great for when you want to emit an event where the state of the event is not important, i.e., it is not important for the subscribers of the event to know about previous values emitted.

BehaviorSubjects are the opposite, they are useful if there is a current “state” of the event that you want all subscribers to be able to access.

Conclusion

RxJS is a very powerful and extensive library that you will use a lot when building Angular applications. The high-level explanations and examples in this blog only scratch the surface of what this library has to offer. Understanding what Observables, Subjects, and BehaviorSubjects are, and how they can be used in an Angular application, is a good first step in becoming proficient in RxJS and Angular.

Call Stack in JavaScript

Amazing Tools