In this lecture, we are going to learn about the Emerge Map operator, this operator will subscribe
to an observable if it's returned by the function passed into it.
Whenever the inner observable emits a value, the value will be pushed onto the next operator or observer.
In this code example, we are creating a new observable with the interval operator.
This observable is returns.
The Merge Map operator will subscribe to the interval observable each time the interval emits a value.
The value gets output in the subscription occurs internally.
There isn't a limit as to how many subscriptions can be made from the Merge Map operator.
This behavior can put us in dangerous memory leak territory.
Let's explore this operator with our code.
At the moment, we are subscribing to the observable return by the Ajax dont get JSON function instead
of subscribing to this observable from the observer.
Let's use the Merge Map operator to handle this process at the top of the file.
We will update the import statement to include the Merge Map operator.
Next, we will replace the map operator with the Merge Map operator.
The map and merge map operators are similar.
They will allow us to interact with the value emitted by the observable.
The main difference is that the Merge Map operator will subscribe to an observable returned by the function
in the observer.
We can revert the subscription to the console dialog statement.
We can click the button in the document to test the behavior of the operator.
This time, the response from the request gets logged.
We aren't receiving an observable, even though we're returning an observable, the Merge Map operator
subscribes to.
The observable values pushed by the observable are pushed to the observer.
The Merge Map operator works great, but it could potentially introduce a memory leak in our app if
we are not careful.
Let's look at an example of a potential issue from this operator in the import statement and the interval
operator.
Next, we will return the interval operator with a duration of 1000 milliseconds.
The Merge Map operator will subscribe to the observable returned by this operator.
If we click the button, the numbers emitted by the operator will be logged by our observer.
The interval will run infinitely.
That's the problem.
If we don't need the observable anymore, we should complete it.
This problem compounds if we click the button again.
The Merge Map operator will not impose a limit on active observables.
It'll continue to subscribe to each interval.
We are responsible for managing the inner observables.
Always keep this in mind whenever working with the Merge Map operator.
It's a powerful operator, but we should always control the lifespan of the observable.
Let's limit the values emitted by the interval operator by importing the Take operator.
Next, let's add the tick operator after the Merge Map operator, we will limit the values emitted by
the observable to five.
Just to make sure we should verify if the inner observable gets completed, import the tap operator.
Previously, we talked about this operator.
It allows us to spy on the values emitted through the pipeline.
Let's change the pipe operator after the interval operator.
It's perfectly valid to chain another pipe function.
We can refine the values emitted by our inner observables for this example, we will add the tap operator
with the console log function.
Next, let's click on the button to view the behavior of our observable fine values are emitted before
the observable is completed.
The values are emitted twice because we're logging them from the observable and observer.
Since we don't see additional values in the console after completion, we verify the inner observable
has been completed.
Technically, we're completing the outer observable.
However, the inner observable gets completed, too.
If we attempt to click on the button again, nothing happens.
The outer observable gets completed to once an observable completes, values are no longer emitted.
What if we want to keep the outer observable open but the inner observable completed?
We can move the take operator from the outer pipe to the inner pipe.
We can click the button to jumpstart the observable this time.
The outer observable never completes, but the inner observable does.
We can click the button multiple times to restart the observable.
The inner observable will always be complete after five values have been emitted.
As you can see, our SJS gives us ultimate flexibility for managing our observables.
It's always important to complete an observable.
I know I've said that dozens of times I'll keep repeating it because it's vital to avoid memory leaks
or unexpected behavior.
Keep in mind, the Tap operator is your friends.
In the next set of lectures, we will look at additional flattening operators.
Are SJS exports different operators to handle the same task?
Their differences are how new inner subscriptions are handled.
I'll see you in the next one.