Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Order of operations with subscription

I have code like this:

  get dislpayHello(): boolean {
    let result = false;
    console.log('start');
    
    let observable = of(true);
    observable.subscribe((display) => {
      console.log('set value');
      result = true;
    });

    console.log('finish');
    return result;
  }

StackBlitz

I always thought that, whatever callback we put in subscribe(), it will be executed asynchronously, and since JavaScript is one threaded, callback will be executed after whatever’s left in current block of code. So in this example, I would expect dislpayHello method to always return false, and console to log in order: ‘start’, ‘finish’, ‘setValue’. However this is not what happens, when I tried it, subscribe block executes before rest of code. Was I simply wrong all this time?

How do I know whether subscription will be executed immediately, or it will be postponed? Is there any documentation or articles I could read on that?

Tags:

2

Answers


  1. 0

    It is a misconception that Observables are always asynchronous, usually because they are often used to handle things like HTTP requests which are:

    An Observable is a lazily evaluated computation that can synchronously or asynchronously return zero to (potentially) infinite values from the time it’s invoked onwards.

    Some people claim that Observables are asynchronous. That is not true.

    https://rxjs.dev/guide/observable

    Login or Signup to reply.
  2. 0

    I recommend reading https://rxjs.dev/guide/observable, which clarifies this. Excerpts:

    Some people claim that Observables are asynchronous. That is not true. If you surround a function call with logs, like this:

    console.log('before');
console.log(foo.call());
console.log('after');

    (where foo was defined as):

        import { Observable } from 'rxjs';
     
    const foo = new Observable((subscriber) => {
      console.log('Hello');
      subscriber.next(42);
    });
     
    foo.subscribe((x) => {
      console.log(x);
    });
    foo.subscribe((y) => {
      console.log(y);
    });

    You will see the output:

    "before"
"Hello"
42
"after"

    And this is the same behavior with Observables:

    console.log('before');
foo.subscribe((x) => {
  console.log(x);
});
console.log('after');

    And the output is:

    "before"
"Hello"
42
"after"

    Which proves the subscription of foo was entirely synchronous, just like a function.

    Observables are able to deliver values either synchronously or asynchronously.

    What is the difference between an Observable and a function? Observables can "return" multiple values over time, something which functions cannot.

    Furthermore:

    observable.subscribe() means "give me any amount of values, either synchronously or asynchronously"

    Basically, subscribe can be sync or async, depending on how you are using it. If its next is evaluated synchronously, then it is sync. Otherwise, it’s async.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search