1
00:00:00,120 --> 00:00:06,120
In this lecture, we are going to talk about a memory leak issue with our service memory leaking is

2
00:00:06,120 --> 00:00:10,050
not a widely discussed topic among JavaScript developers.

3
00:00:10,350 --> 00:00:13,980
It can often be overlooked when developing a large application.

4
00:00:14,280 --> 00:00:16,050
Let's get into memory leaking.

5
00:00:16,530 --> 00:00:21,480
In simple terms, a memory leak is when a variable is not on initialized.

6
00:00:21,750 --> 00:00:24,630
Applications can have dozens of variables.

7
00:00:24,960 --> 00:00:29,340
Some variables need to be available throughout the lifetime of an application.

8
00:00:29,700 --> 00:00:32,580
Other variables can exist for a single moment.

9
00:00:32,940 --> 00:00:35,130
Afterward, we can toss them away.

10
00:00:35,400 --> 00:00:40,950
Whenever we define a variable, we are taking up memory or storage on a user's machine.

11
00:00:41,550 --> 00:00:47,580
A memory leak can happen if we forget to destroy a variable in some programming languages.

12
00:00:47,730 --> 00:00:50,910
Managing memory needs to be handled by the developer.

13
00:00:51,180 --> 00:00:57,960
However, with JavaScript, the process is semi-automated, variables defined and functions are cleaned

14
00:00:57,960 --> 00:00:58,260
up.

15
00:00:58,590 --> 00:01:00,300
After a function is finished.

16
00:01:00,300 --> 00:01:05,200
Executing JavaScript will destroy variables defined inside the function.

17
00:01:05,610 --> 00:01:12,060
The properties in our classes are destroyed whenever a class is destroyed, whenever data is destroyed

18
00:01:12,060 --> 00:01:12,750
in our app.

19
00:01:12,960 --> 00:01:17,100
We release memory on a user's machine by releasing memory.

20
00:01:17,220 --> 00:01:19,650
Other programs can take up the memory.

21
00:01:19,980 --> 00:01:24,810
It's considered good practice to free memory whenever you don't need it anymore.

22
00:01:25,290 --> 00:01:28,950
You may hear this process referred to as garbage collection.

23
00:01:29,250 --> 00:01:31,800
It's a program that runs behind the scenes.

24
00:01:32,110 --> 00:01:36,240
It'll periodically check if there are variables that should be freed.

25
00:01:36,570 --> 00:01:41,070
As I said before, this process is semi-automated in JavaScript.

26
00:01:41,340 --> 00:01:43,380
It's not something we have to worry about.

27
00:01:43,380 --> 00:01:48,990
As often we can manually free memory by changing of variables value to null.

28
00:01:49,320 --> 00:01:55,260
There are other ways to free memory by deleting a property on an object or removing an item from an

29
00:01:55,260 --> 00:01:55,740
array.

30
00:01:56,160 --> 00:02:01,020
Overall, it's not something we need to worry about as often with JavaScript.

31
00:02:02,310 --> 00:02:04,080
Our model has a memory leak.

32
00:02:04,290 --> 00:02:05,730
Can you guess what it is?

33
00:02:05,970 --> 00:02:09,840
We are not unregister ring a model after it has been destroyed.

34
00:02:10,229 --> 00:02:11,580
I'll show you what I mean.

35
00:02:11,910 --> 00:02:14,940
I'm currently inside the app template file.

36
00:02:16,830 --> 00:02:22,950
Inside our templates, we are loading the authentication mobile component by adding this element.

37
00:02:23,190 --> 00:02:26,370
Angular will create a new instance of this component.

38
00:02:26,730 --> 00:02:31,320
The authentication modal component will register a modal worth our service.

39
00:02:31,590 --> 00:02:32,910
Simple enough, right?

40
00:02:33,270 --> 00:02:36,390
What if we destroyed this component after creating it?

41
00:02:36,720 --> 00:02:38,040
Let's see what happens.

42
00:02:38,430 --> 00:02:42,170
We will add a N.G. if directive on this component.

43
00:02:44,720 --> 00:02:48,800
The expression for this directive will be the following show model.

44
00:02:51,390 --> 00:02:55,050
This property doesn't exist inside the components class.

45
00:02:55,230 --> 00:02:56,700
Let's define it next.

46
00:02:57,000 --> 00:02:59,490
Open the app component class file.

47
00:03:02,130 --> 00:03:08,220
Inside the app class, we will add the show model property with an initial value of true.

48
00:03:10,820 --> 00:03:14,930
Next, let's start toggling the model by toggling this property.

49
00:03:15,260 --> 00:03:19,010
We will add the energy on in it lifecycle function.

50
00:03:21,620 --> 00:03:24,980
Normally we would implement the interface for this function.

51
00:03:25,280 --> 00:03:28,010
However, this test will be temporary.

52
00:03:28,340 --> 00:03:33,200
We will remove the lifecycle function after we have fixed the memory leak issue.

53
00:03:33,560 --> 00:03:37,520
Inside this function, we will call the set interval function.

54
00:03:37,850 --> 00:03:40,940
The interval will be 1000 milliseconds.

55
00:03:43,340 --> 00:03:48,170
Lastly, we will set the show modal property to its opposite value.

56
00:03:50,740 --> 00:03:53,980
Every second, the model will appear and disappear.

57
00:03:54,370 --> 00:04:01,960
The NGF directive will destroy a component if the expression evaluates to false angular handles, cleaning

58
00:04:01,960 --> 00:04:04,090
up our components from the document.

59
00:04:04,390 --> 00:04:11,140
However, our services will remain intact until another component needs them to better understand.

60
00:04:11,320 --> 00:04:16,480
Let's inject bimodal service object by adding the constructor function.

61
00:04:23,060 --> 00:04:28,940
Be sure to import the modal service object if it wasn't automatically imported for you.

62
00:04:29,270 --> 00:04:34,280
Next, inside the interval function, we will log the model's property.

63
00:04:39,950 --> 00:04:44,240
This line will throw an error because the model's property is set to private.

64
00:04:44,570 --> 00:04:49,100
Let's change the access her to public open the model service file.

65
00:04:51,590 --> 00:04:53,990
Change the private key word to public.

66
00:04:56,580 --> 00:04:59,080
Once again, we shouldn't change the access.

67
00:04:59,550 --> 00:05:02,580
The reason we're changing it is for testing purposes.

68
00:05:02,850 --> 00:05:05,940
We will revert these changes after reviewing the error.

69
00:05:06,210 --> 00:05:11,730
Let's refresh the page with the developer tools opened under the angular panel.

70
00:05:11,910 --> 00:05:15,150
The authentication model component is being toggled.

71
00:05:15,480 --> 00:05:17,610
Angular can manage our components.

72
00:05:17,850 --> 00:05:22,080
Duplicate components are not the type of issue will encounter with Angular.

73
00:05:22,380 --> 00:05:25,950
It can destroy the component on our behalf with one directive.

74
00:05:26,310 --> 00:05:29,880
Whenever the component gets destroyed, memory is released.

75
00:05:30,180 --> 00:05:30,870
Be released.

76
00:05:30,870 --> 00:05:35,950
Memory can be allocated to other programs under the console panel.

77
00:05:35,970 --> 00:05:38,520
We will start to experience some issues.

78
00:05:38,850 --> 00:05:43,950
If you look inside any of the arrays, we will find models with duplicate IDs.

79
00:05:44,280 --> 00:05:47,640
The original model is not being destroyed in our service.

80
00:05:47,910 --> 00:05:53,280
Therefore, the browser is managing models that don't exist in our application anymore.

81
00:05:53,520 --> 00:05:55,440
We have a memory leak in our app.

82
00:05:55,950 --> 00:06:00,510
We should unregister a model if it is destroyed in the next lecture.

83
00:06:00,540 --> 00:06:02,430
We will fix the memory leak.