RxJS Is Observer and Subscriber the same thing?

Question

RxJS introduces Observables, a new Push system for JavaScript. An Observable is a Producer of multiple values, "pushing" them to Observers (Consumers).

Subscribing to an Observable is analogous to calling a Function.

To invoke an Observable we should call the subscribe() function from the Observable object itself and pass the observer as the consumer of the data delivered by the observable like:

observable.subscribe( { /*this is an observer*/ } );

Also this documentation says:

What is an Observer? An Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: next, error, and complete. The following is an example of a typical Observer object:

On the other hand the first documentation says:

The Observable constructor takes one argument: the subscribe function. The following example creates an Observable to emit the string 'hi' every second to a subscriber.

import { Observable } from 'rxjs';

const observable = new Observable(function subscribe(subscriber) {
  const id = setInterval(() => {
    subscriber.next('hi')
  }, 1000);
});

When calling observable.subscribe with an Observer, the function subscribe in new Observable(function subscribe(subscriber) {...}) is run for that given subscriber. Each call to observable.subscribe triggers its own independent setup for that given subscriber.

So the entity Subscriber is just the argument passed into the subscribe function when creating a new Observable? If not who is the subscriber?

Are Observers and Subscribers the same entity? as mentioned in this documentation

Why isn't the code that invokes observable.subscribe({observer as call backs}) the subscriber of the observable? Like the consumer of a function's return value is the code that makes the function call.

I don't know why this was downvoted, I think questions like these are useful. Your last link essentially explains it, though: Observer is the API for the contract of consuming an observable (next, error, complete), while Subscriber is 1) a specific implementation of observers and 2) used in RxJs to provide additional functionality. Notably, subscribe gets passed a (partial) observer which is then converted into a Subscriber. — Ingo Bürk
@IngoBürk but why there is also subscriber in the observable creating function when creating an Observable? — CloudWave

Mrk Sef Mrk Sef · Accepted Answer · 2021-04-04T20:10:12

Observer

const observer = {
  next: v => /* code for next callback*/,
  error: err => /* code for error callback*/,
  complete: () => /* code for completion callback*/
}

Subscription

const subscription = {
  unsubscribe: () => /* code for unsubscribe callback */
}

Observable

const observable1 = from([1,2,3,4,5]);
const observable2 = of(1,2,3,4,5);
const observable3 = new Observable(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.next(4);
  observer.next(5);
  observable.complete();

  return { // return a subscription
    unsubscribe: () => /* code for unsubscribe callback */
  };
});

Subscribe and use the Returned Subscription

// Store a subscription 
const subscription = observable3.subscribe(observer);
// Invoke the unsubscribe callback defined by the observable.
subscription.unsubscribe();

Okay. Then What is a Subscriber?

[Subscriber] Implements the Observer interface and extends the Subscription class. While the Observer is the public API for consuming the values of an Observable, all Observers get converted to a Subscriber... Subscriber is a common type in RxJS, and crucial for implementing operators, but it is rarely used as a public API.

Are observers and subscribers the same thing? Kind of, yes? Depends on how concretely you ask the question.

Consider this:

observable3.subscribe({
  next: v => /* code for next callback */
});

obsevable3.subscribe(
  v => /* code for next callback */
);

The first is an object with only one observer property defined. The second is simply a lambda function. They both end up generating basically the same subscriber.