1
00:00:00,120 --> 00:00:06,450
In this lecture, we are going to learn about the Emerge Map operator, this operator will subscribe

2
00:00:06,450 --> 00:00:10,530
to an observable if it's returned by the function passed into it.

3
00:00:10,890 --> 00:00:18,120
Whenever the inner observable emits a value, the value will be pushed onto the next operator or observer.

4
00:00:18,450 --> 00:00:24,090
In this code example, we are creating a new observable with the interval operator.

5
00:00:24,420 --> 00:00:26,430
This observable is returns.

6
00:00:26,940 --> 00:00:34,710
The Merge Map operator will subscribe to the interval observable each time the interval emits a value.

7
00:00:34,770 --> 00:00:39,000
The value gets output in the subscription occurs internally.

8
00:00:39,390 --> 00:00:44,850
There isn't a limit as to how many subscriptions can be made from the Merge Map operator.

9
00:00:45,240 --> 00:00:49,080
This behavior can put us in dangerous memory leak territory.

10
00:00:49,380 --> 00:00:52,050
Let's explore this operator with our code.

11
00:00:52,830 --> 00:01:00,300
At the moment, we are subscribing to the observable return by the Ajax dont get JSON function instead

12
00:01:00,300 --> 00:01:03,270
of subscribing to this observable from the observer.

13
00:01:03,450 --> 00:01:09,210
Let's use the Merge Map operator to handle this process at the top of the file.

14
00:01:09,300 --> 00:01:13,980
We will update the import statement to include the Merge Map operator.

15
00:01:16,480 --> 00:01:21,310
Next, we will replace the map operator with the Merge Map operator.

16
00:01:23,760 --> 00:01:26,910
The map and merge map operators are similar.

17
00:01:27,210 --> 00:01:31,260
They will allow us to interact with the value emitted by the observable.

18
00:01:31,590 --> 00:01:38,010
The main difference is that the Merge Map operator will subscribe to an observable returned by the function

19
00:01:38,460 --> 00:01:39,580
in the observer.

20
00:01:39,600 --> 00:01:43,830
We can revert the subscription to the console dialog statement.

21
00:01:46,390 --> 00:01:50,770
We can click the button in the document to test the behavior of the operator.

22
00:01:51,070 --> 00:01:54,520
This time, the response from the request gets logged.

23
00:01:54,790 --> 00:02:01,210
We aren't receiving an observable, even though we're returning an observable, the Merge Map operator

24
00:02:01,210 --> 00:02:02,140
subscribes to.

25
00:02:02,140 --> 00:02:07,390
The observable values pushed by the observable are pushed to the observer.

26
00:02:07,990 --> 00:02:14,230
The Merge Map operator works great, but it could potentially introduce a memory leak in our app if

27
00:02:14,230 --> 00:02:15,310
we are not careful.

28
00:02:15,700 --> 00:02:22,900
Let's look at an example of a potential issue from this operator in the import statement and the interval

29
00:02:22,900 --> 00:02:23,650
operator.

30
00:02:26,250 --> 00:02:32,100
Next, we will return the interval operator with a duration of 1000 milliseconds.

31
00:02:34,660 --> 00:02:40,120
The Merge Map operator will subscribe to the observable returned by this operator.

32
00:02:40,510 --> 00:02:46,090
If we click the button, the numbers emitted by the operator will be logged by our observer.

33
00:02:46,480 --> 00:02:48,580
The interval will run infinitely.

34
00:02:48,910 --> 00:02:49,870
That's the problem.

35
00:02:50,200 --> 00:02:53,770
If we don't need the observable anymore, we should complete it.

36
00:02:54,130 --> 00:02:57,070
This problem compounds if we click the button again.

37
00:02:57,700 --> 00:03:02,560
The Merge Map operator will not impose a limit on active observables.

38
00:03:02,840 --> 00:03:05,620
It'll continue to subscribe to each interval.

39
00:03:05,980 --> 00:03:09,430
We are responsible for managing the inner observables.

40
00:03:09,700 --> 00:03:13,750
Always keep this in mind whenever working with the Merge Map operator.

41
00:03:14,080 --> 00:03:19,210
It's a powerful operator, but we should always control the lifespan of the observable.

42
00:03:19,720 --> 00:03:25,510
Let's limit the values emitted by the interval operator by importing the Take operator.

43
00:03:28,030 --> 00:03:35,140
Next, let's add the tick operator after the Merge Map operator, we will limit the values emitted by

44
00:03:35,140 --> 00:03:36,820
the observable to five.

45
00:03:39,370 --> 00:03:46,630
Just to make sure we should verify if the inner observable gets completed, import the tap operator.

46
00:03:49,200 --> 00:03:52,020
Previously, we talked about this operator.

47
00:03:52,290 --> 00:03:56,340
It allows us to spy on the values emitted through the pipeline.

48
00:03:56,700 --> 00:04:00,750
Let's change the pipe operator after the interval operator.

49
00:04:03,370 --> 00:04:06,610
It's perfectly valid to chain another pipe function.

50
00:04:06,930 --> 00:04:14,530
We can refine the values emitted by our inner observables for this example, we will add the tap operator

51
00:04:14,530 --> 00:04:17,079
with the console log function.

52
00:04:19,690 --> 00:04:27,040
Next, let's click on the button to view the behavior of our observable fine values are emitted before

53
00:04:27,040 --> 00:04:28,810
the observable is completed.

54
00:04:29,260 --> 00:04:35,200
The values are emitted twice because we're logging them from the observable and observer.

55
00:04:35,650 --> 00:04:42,610
Since we don't see additional values in the console after completion, we verify the inner observable

56
00:04:42,610 --> 00:04:43,810
has been completed.

57
00:04:44,410 --> 00:04:47,650
Technically, we're completing the outer observable.

58
00:04:47,860 --> 00:04:51,370
However, the inner observable gets completed, too.

59
00:04:51,790 --> 00:04:55,360
If we attempt to click on the button again, nothing happens.

60
00:04:55,630 --> 00:05:03,040
The outer observable gets completed to once an observable completes, values are no longer emitted.

61
00:05:03,490 --> 00:05:08,620
What if we want to keep the outer observable open but the inner observable completed?

62
00:05:09,010 --> 00:05:13,360
We can move the take operator from the outer pipe to the inner pipe.

63
00:05:15,950 --> 00:05:20,030
We can click the button to jumpstart the observable this time.

64
00:05:20,180 --> 00:05:24,710
The outer observable never completes, but the inner observable does.

65
00:05:25,070 --> 00:05:29,180
We can click the button multiple times to restart the observable.

66
00:05:29,540 --> 00:05:34,670
The inner observable will always be complete after five values have been emitted.

67
00:05:35,300 --> 00:05:41,700
As you can see, our SJS gives us ultimate flexibility for managing our observables.

68
00:05:42,050 --> 00:05:44,930
It's always important to complete an observable.

69
00:05:45,260 --> 00:05:51,680
I know I've said that dozens of times I'll keep repeating it because it's vital to avoid memory leaks

70
00:05:51,680 --> 00:05:53,330
or unexpected behavior.

71
00:05:53,660 --> 00:05:57,170
Keep in mind, the Tap operator is your friends.

72
00:05:57,740 --> 00:06:02,570
In the next set of lectures, we will look at additional flattening operators.

73
00:06:02,900 --> 00:06:07,610
Are SJS exports different operators to handle the same task?

74
00:06:07,940 --> 00:06:11,870
Their differences are how new inner subscriptions are handled.

75
00:06:12,200 --> 00:06:13,790
I'll see you in the next one.