1
00:00:00,510 --> 00:00:04,650
This is for sure, a question that they hear on every single JavaScript interview.

2
00:00:04,930 --> 00:00:07,950
This is why you must understand border closures.

3
00:00:08,280 --> 00:00:14,880
As you can see here, we have a task create a counter function which has increment and get value functionality.

4
00:00:18,290 --> 00:00:23,930
And actually, you might not get it from this task, but this is a task to guide enclosures because

5
00:00:23,930 --> 00:00:30,290
we must create a function where inside with some value and we have two public methods and this is how

6
00:00:30,290 --> 00:00:32,060
you typically need to implement it.

7
00:00:32,390 --> 00:00:36,260
So we want to create our, for example, private account to function.

8
00:00:36,380 --> 00:00:41,480
And this is private because with certain accounting side, which is not available outside.

9
00:00:41,810 --> 00:00:43,730
And actually, this is just a function.

10
00:00:44,120 --> 00:00:50,240
But if you hear an interview that you must or something inside function after you call this function,

11
00:00:50,360 --> 00:00:52,610
then you have a question regarding closure.

12
00:00:52,640 --> 00:00:56,180
So what we want to do here, we want for us to create our counter.

13
00:00:56,180 --> 00:00:59,540
So let's name it combed, and by default, it will be zero.

14
00:00:59,840 --> 00:01:02,360
Melvin must return our public pay.

15
00:01:02,360 --> 00:01:05,810
This two methods increment and get fairly functionality.

16
00:01:06,140 --> 00:01:10,890
This is why we are making here return and inside we want to return to things.

17
00:01:10,910 --> 00:01:16,610
First of all, it is an increment function and this is just a property where we are passing inside our

18
00:01:16,610 --> 00:01:18,350
value and what we want to do.

19
00:01:18,350 --> 00:01:21,560
We want to change this count that we have on the top here.

20
00:01:21,860 --> 00:01:27,680
So we are right in here, count plus equal and here is our value that we want to increase.

21
00:01:27,980 --> 00:01:31,880
And actually, it might be that we want to increase it by default, just by one.

22
00:01:32,090 --> 00:01:34,280
This is why it makes sense to pass here.

23
00:01:34,280 --> 00:01:40,340
One In this case, we can simply call increment and it will work out of the box and the next method

24
00:01:40,340 --> 00:01:41,030
will be here.

25
00:01:41,030 --> 00:01:45,800
Get value because we want to get our count back and actually here.

26
00:01:45,800 --> 00:01:48,740
This is just a function which will return our count.

27
00:01:49,190 --> 00:01:52,300
And the main idea is that this is our public pay.

28
00:01:52,680 --> 00:01:56,480
This is what is available inside this function after we are calling it.

29
00:01:56,750 --> 00:01:57,800
Let's check this out.

30
00:01:57,800 --> 00:02:02,690
Let's create here our counter and work call and here our private account function.

31
00:02:03,020 --> 00:02:04,690
And actually, what they want to do here.

32
00:02:04,700 --> 00:02:06,020
I want to console.log.

33
00:02:06,020 --> 00:02:09,050
First of all, our counter don't get value.

34
00:02:09,260 --> 00:02:14,870
This is our method to get our counter and second level one to call counter dot.

35
00:02:14,870 --> 00:02:21,290
And here is increment to increment our value and then counter once again to check value once again.

36
00:02:21,470 --> 00:02:22,730
Let's check if it's working.

37
00:02:22,910 --> 00:02:24,050
I am reloading the page.

38
00:02:24,050 --> 00:02:25,910
We're getting zero and one.

39
00:02:26,210 --> 00:02:31,400
But the most interest in the idea of what we have inside this private counter, if we are right here,

40
00:02:31,400 --> 00:02:36,950
private counter, you can see that this is a function and actually we don't have any access to this

41
00:02:36,950 --> 00:02:38,120
property comp.

42
00:02:38,360 --> 00:02:41,300
So this property count in this case is private.

43
00:02:41,540 --> 00:02:47,030
And even if I am right in here counter, you can see that we're getting an object with two values get

44
00:02:47,030 --> 00:02:52,040
value and increment, and we don't have any access to our counter property inside.

45
00:02:52,340 --> 00:02:57,760
So this code is working, but it is really tricky and complex because this is a closure.

46
00:02:57,770 --> 00:02:59,390
What does closure ever mean?

47
00:02:59,630 --> 00:03:06,440
Closure means that we have access inside of a function to the outside scope, which actually means here,

48
00:03:06,440 --> 00:03:12,020
for example, inside increment by using count, and we don't have a discount inside this function.

49
00:03:12,260 --> 00:03:16,820
We have it outside here on the top and exactly the same regard and get value.

50
00:03:17,030 --> 00:03:22,940
We have this counter here on the top, not inside this function, which actually means closure function

51
00:03:22,940 --> 00:03:28,280
has access to all properties inside itself and all properties which were defined default.

52
00:03:28,490 --> 00:03:35,180
Why it is important because actually with this single line counter equals private counter work, creating

53
00:03:35,180 --> 00:03:38,180
a closure because by now account counter exist.

54
00:03:38,210 --> 00:03:41,450
We have a closure and we have this reference to this counter.

55
00:03:41,780 --> 00:03:47,870
This is why every single time one of our colon get value and increment, it is working and it is referenced

56
00:03:47,870 --> 00:03:49,670
in this count on the top.

57
00:03:49,910 --> 00:03:52,840
And you might say okay, but it is sounding like magic.

58
00:03:52,850 --> 00:03:58,310
I don't understand how it is looking like in JavaScript, and this is where console directory can help

59
00:03:58,310 --> 00:03:58,520
us.

60
00:03:58,760 --> 00:04:04,730
If people write inside console not console.log, but console directory and then say they want to pass

61
00:04:04,730 --> 00:04:11,330
a function, in our case, a discount to get value and then hidden here and here we don't see a body,

62
00:04:11,330 --> 00:04:17,260
but instead our function is an object and we're interested here in part, which is called scopes.

63
00:04:17,540 --> 00:04:23,000
And this is exactly what we're interested about after we open here scopes, we have here a property

64
00:04:23,000 --> 00:04:25,760
closure and this is exactly our closure.

65
00:04:25,970 --> 00:04:31,880
As you can see here, we have closure, private counter and here count equals one, which means exactly

66
00:04:31,880 --> 00:04:32,510
we have this.

67
00:04:32,510 --> 00:04:36,050
Let's count equals zero and now it is inside closure.

68
00:04:36,290 --> 00:04:42,590
This is why it is available first inside JavaScript and all this questions regarding closures are exactly

69
00:04:42,590 --> 00:04:43,130
the same.

70
00:04:43,310 --> 00:04:48,830
For example, you might be asked the question you need to create a function which will store inside

71
00:04:48,860 --> 00:04:51,830
six Austrian and will just return it one of a call.

72
00:04:51,830 --> 00:04:54,770
This function again, so it will look something like this.

73
00:04:54,980 --> 00:04:58,220
For example, let's create the function private secret.

74
00:04:58,790 --> 00:05:04,580
And here we don't pass anything inside, but we want to do inside this create our secret sin.

75
00:05:04,790 --> 00:05:08,000
So let's just create a secret and it equals fool.

76
00:05:08,210 --> 00:05:14,450
So the secret is exactly our closure, and for it to be available outside, we must return here a function.

77
00:05:14,720 --> 00:05:16,870
So with simply return here, a function and.

78
00:05:16,990 --> 00:05:18,940
This function will return this secret.

79
00:05:19,390 --> 00:05:25,150
This means that when we are creating outside a function which we can name, for example, get secret,

80
00:05:25,510 --> 00:05:28,000
we must call here our private secret function.

81
00:05:28,240 --> 00:05:32,630
The main idea is that private secret function gives back a function.

82
00:05:32,980 --> 00:05:35,620
In this case, our secret is a function.

83
00:05:35,830 --> 00:05:39,760
And now we can console.log our get secret and we just call it.

84
00:05:40,060 --> 00:05:43,690
And actually, as you can see in console, we're getting this full strain back.

85
00:05:44,170 --> 00:05:50,890
This is why our secret screen is actually a closure and it is available outside after restore this private

86
00:05:50,890 --> 00:05:52,090
secret inside.

87
00:05:52,090 --> 00:05:58,780
Additional property in this case were startling disclosure after our function was executed and closure

88
00:05:58,780 --> 00:06:01,390
is a super popular pattern inside JavaScript.

89
00:06:01,420 --> 00:06:03,970
This is why you must know how to use closures.