In this post let’s talk about BehaviorSubject and Subject reactive operators, their differences and why using them.
I will write from my experience and based on the RxJS documentation.

In the next exemple, BehaviorSubject will emit number type data.

We instantiate our operator in a constant called ‘user’ with the value: ‘Miguel’.

To obtain this value, we can subscribe and therefore when it changes value, we will receive the new value. Also, we can get the value by using: “value” it changes asynchronously.

To change the value of our operator, we use the method: next()

// RxJS v6+
import { BehaviorSubject } from 'rxjs';

const user = new BehaviorSubject<string>('Miguel');

// two new subscribers will get initial value => output: 'Miguel', 'Miguel'
user.subscribe(console.log);
user.subscribe(console.log);

// two subscribers will get new value => output: 'Esther', 'Esther'
user.next('Esther');

// new subscriber will get latest value ('Esther') => output: 'Esther'
user.subscribe(console.log);

// all three subscribers will get new value => output: 'Juan', 'Juan', 'Juan'
user.next('Juan');

// new "value" Get value with: value. will get latest value.
console.log(user.value) => output: 'Juan'

When we get a data, and a method or a function that we want to call to receive a data, we can reduce it in the following way -> In JavaScript it is the same to do this:

user.subscribe(console.log);
user.subscribe(resp => console.log(resp) );

If you want to know more you can, this comment on stack overflow may help you -> https://stackoverflow.com/questions/48099360/why-is-it-passing-the-console-log-as-argiment-of-the-observble-subscribe-funct

Now let’s talk about the Subject operator:

One of the first differences that it has with BehaviorSubject that is worth mentioning is that it is not initialized with a value. Another is that you can’t access the value directly with the “value” property, only there in BehaviorSubject.

To get the value of Subject you always have to subscribe to it. All Subject is an observable. To send a new value to the subject just call next(‘And enter the new value here’). and this value will be received everywhere we are subscribed.

The example below, is similar to the BehaviorSubject, but this time we will only have one subscriber:

import { Subject } from 'rxjs';
 
const user = new Subject<string>();
 
user.subscribe(newUser => {
     console.log(newUser),
});

 
user.next('Miguel');
user.next('María');
 
// Logs:
// 'Miguel' - 1
// 'María'  - 2

If you want to stop tracking changes in both BehaviorSubject and Subject, you can use unsubscribe().

If you are using Angular I recommend you to implement the OnDestroy and unsubscribe so that the call is not duplicated. ->

ngOnDestroy() {
  user.unsubscribe()
}

The last data of BehaviorSubject, will be kept in the cache if you have an account. It can be very useful.

Thank you for reading my post, I hope it was helpful. Greetings!.