JavaScript: Callback, Promise, Observable
When I started to work with the Angular 4 in 2017, I was little bit confused and faced difficulties to understand the concept of promise and observable and asynchronous behavior. Then I started to study about asynchronous behaviors and RxJS. Today I will share my experience about my asynchronous leaning and RxJS. Now a days, Angular is one of the powerful and popular front-end framework. One of the behind reasons of being a powerful framework is the use of RxJS. Angular uses RxJS Observable instead of promises for dealing with HTTP.
RxJS
RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observable that makes it easier to compose asynchronous or callback-based code. RxJS can be used both browser and server side using Node.js.
Callback
A callback function is a function passed into another function as an argument which is invoked inside the callee function(here greeting) to complete or after some kind of actions.
Promise
A promise is an object returned single value that will be resolved or rejected. That emitted data can be process very straightforward way. When promise resolve then .then() will be executed and .catch() will be executed when promise reject.
Promise is provided by JavaScript standard built in object to handle the asynchronous. So you don’t need integrate any package/library.
Observable
An Observable is basically a function that can return a stream of values to an observer over time, this can either be synchronously or asynchronously.
Promise vs Observable
It has three most basic difference between promise and observable
- A Promise is eager, but an Observable is lazy
- A Promise is always asynchronous, on the other hand, an Observable can be both (synchronous or asynchronous).
- A Promise can provide a single value, whereas an Observable returns multiple values.
1. Eager vs Lazy
As soon as JavaScript interpreter see the promise declaration, its immediately execute promise implementation. Please see the example for better explanation.
Here, “Inside Promise” message is console before the promise.then call. So promise is eager to execute as soon as promise declare.
On the other hand, Observable is lazy.
Here, “Inside Observable” is printed after the “Before calling subscribe”. So, when subscribe on observable is called then Observable function will be executed.
2. Asynchronous, synchronous features
Promise is always asynchronous. Whereas, Observable can work asynchronous and synchronous.
Here, from the above example, we can see that promise always work as asynchronous. That’s why, “Inside Promise” message is printed after the “After promise.than” message.
In the above code, example 1 is showing the synchronous example of observable and Example 2 is showing the asynchronous example.
3. Single value vs Multiple values
The third difference is promise only return only single value. On the other hand, observable can return multiple value over time.
In above example, output will be ‘Resolve 1’. But not printed out the ‘Resolve 2’ and ‘Resolve 3’. After first resolve, then function will be executed.
But Observable can print the multiple value over time.
Conclusion:
I hope you enjoyed the reading, and if you did, let me know in the comments! Thank you very much
