I’m a complete novice when it comes to Javascript. Please assist me in comprehending the concepts of Observables.
- Do Observables have a storage location, similar to how Web API requests are saved in the Web API Environment before being moved to the Call Back Queue?
- Is this the original observable or a copy of that has been moved from the callback queue to the Call stack?
- How Observables execution is different from promises in the call stack?
- Is it necessary for the call stack to be empty in order to execute the Observables?
- Is it possible to run normal function calls alongside Observables (i.e., it keeps fetching data from the live environment while the rest of the functions are run separately)?
- What happens if we don’t unsubscribe the Observables and they continue to operate in the Call stack until the app is closed?
Advertisement
Answer
- Do Observables have a storage location, similar to how Web API requests are saved in the Web API Environment before being moved to the Call Back Queue?
No.They are held in memory by a reference to them being held by the function that triggers them. For example, if you create an observable from a DOM event, RxJS will add an event listener to the DOM that holds a reference to the observable. If you delete the DOM element being listened to, the DOM element gets collected from memory by the garbage collector, allowing the event handler to be garbage collected, allowing the observable and its internal function chain to be garbage collected, in turn allowing the subscription callback function to be garbage collected – provided no reference to the observable is separately retained in user code.
- Is this the original observable or a copy of that has been moved from the callback queue to the Call stack?
Based on a negative answer to question 1, this question is not based on valid assumptions.
- How Observables execution is different from promises in the call stack?
Observables are not executed, they are objects. Internally they record a chain of functions which is called when an external function triggers the observable by providing data to it. Of course the external function may be a timer call back (think Scheduler) that repeats, or an event that may or not repeat, or a one time promise call back.
Promises have some similarities, including the fact that they are objects sitting in memory somewhere. Internally they hold two lists of call back functions to be called if the promise is fulfilled or rejected along with resolve and reject references to the next promise in a promise chain.
Like observables, individual Promise objects are held in memory by their resolve and reject functions which are particular to a promise instance . Like observables, promises may also be held in memory by references to a Promise object held in user code.
- Is it necessary for the call stack to be empty in order to execute the Observables?
No. If the observable is triggered by an asynchronous task, the call stack may be almost empty except for some code associated with providing data to the observable object and internal code responsible for running the chain of functions that run before calling the subscriber call back function. If the observable is triggered synchronously who knows what’s on the call stack.
5 Is it possible to run normal function calls alongside Observables (i.e., it keeps fetching data from the live environment while the rest of the functions are run separately)?
Yes, except that if the observable is triggered synchronously from user code, it won’t return to the user code until all subscriber callbacks have returned.
6 What happens if we don’t unsubscribe the Observables and they continue to operate in the Call stack until the app is closed?
Observables aren’t in the call stack and aren’t held in memory by the subscription call back function. They get called from data source events or functions and create a stack frame in the call stack for the duration of the call.
If the data source doesn’t release its reference to an observable, the observable object just sits in memory without doing anything. If the data source referencing the observable ceases to be held in memory, and no reference to the observable is held in user code, the observable becomes eligible for garbage collection from memory. The subscription callback function will then also become eligible for collection from memory if user code holds no reference to it (e.g. if it is an inline anonymous function).
Note that observables are supported by a JavaScript library. You are not receiving observables from general data base or fetch or HTTP APIs directly, you are receiving the observable from some intermediary software layer that is wrapping responses to requests made for you into a data source that triggers an observable returned to you.
My apologies if this answer contains inaccuracies, based as it is on a knowledge of JavaScript and the assumption that RxJS is “well behaved” enough to infer its logic from documentation.