1
00:00:00,810 --> 00:00:01,580
Welcome back.

2
00:00:01,710 --> 00:00:04,150
In this video we're going to talk about closures.

3
00:00:04,800 --> 00:00:08,240
Closures are one of the more challenging concepts to wrap your head around.

4
00:00:08,370 --> 00:00:12,360
But once you really understand what the definition is and I've seen a couple of them it's going to be

5
00:00:12,360 --> 00:00:13,570
a lot easier.

6
00:00:13,950 --> 00:00:15,720
So what are we going to do in this video.

7
00:00:15,720 --> 00:00:18,950
We're going to understand what a closure is and what it isn't.

8
00:00:19,200 --> 00:00:22,460
We're going to use closures to emulate private variables.

9
00:00:22,680 --> 00:00:26,360
We're going to list some use cases for closures in the real world.

10
00:00:27,210 --> 00:00:28,520
So what's a closure.

11
00:00:28,830 --> 00:00:35,190
A closure is a function that makes use of variables defined in outer functions that have previously

12
00:00:35,220 --> 00:00:36,180
returned.

13
00:00:36,690 --> 00:00:39,540
So I know that definition might not make too much sense right now.

14
00:00:39,690 --> 00:00:41,580
So let's look at an example right away.

15
00:00:42,030 --> 00:00:47,210
I'm going to press command option Jay and open up my chrome dev tools.

16
00:00:47,370 --> 00:00:52,670
Now if we say that a closure is a function that makes use of variables defined in our functions well

17
00:00:52,800 --> 00:00:54,420
then let's make an outer function.

18
00:00:54,630 --> 00:01:01,410
So I'll make a function called outer inside of this function amik a variable called data which is equal

19
00:01:01,410 --> 00:01:02,200
to the string.

20
00:01:02,220 --> 00:01:06,680
Closures are an inside of the outer function.

21
00:01:06,690 --> 00:01:15,480
I will return a new function called Inner and inside of this inner function or make a variable called

22
00:01:15,510 --> 00:01:19,130
inner data and inner data is equal to the string.

23
00:01:19,140 --> 00:01:20,520
Awesome.

24
00:01:21,570 --> 00:01:28,820
Now inside of this inner function I'm going to return the string closures are with the string.

25
00:01:28,830 --> 00:01:32,180
Awesome.

26
00:01:32,940 --> 00:01:34,660
Now let's call this outer function.

27
00:01:35,400 --> 00:01:36,870
And what should it return to us.

28
00:01:36,990 --> 00:01:40,140
Well it's going to return the definition of the inner function.

29
00:01:40,410 --> 00:01:46,800
But notice here that inside of this inner function I'm making use of a variable called data which was

30
00:01:46,800 --> 00:01:49,080
defined in the outer function.

31
00:01:49,110 --> 00:01:55,280
So when I call this outer function and I call the inner function right away it returns the string.

32
00:01:55,320 --> 00:01:57,480
Closures are awesome.

33
00:01:57,480 --> 00:02:03,930
So you may not really see the power of closures right now but this is just a good example of using variables

34
00:02:04,230 --> 00:02:11,100
defined in outer functions like this data variable right here inside of an inner function.

35
00:02:11,100 --> 00:02:16,680
When the outer function has already returned notice right here the outer function is returned but I'm

36
00:02:16,680 --> 00:02:22,730
still able to use this data variable even though the outer function has already returned.

37
00:02:23,610 --> 00:02:25,680
Let's take a look at another example.

38
00:02:25,950 --> 00:02:31,050
Over here I I've a function called Outer that takes in a parameter A and it returns a function called

39
00:02:31,080 --> 00:02:33,730
Inner which takes in a parameter b.

40
00:02:34,320 --> 00:02:40,980
The inner function is making use of the variable A which was defined in the outer function and by the

41
00:02:40,980 --> 00:02:43,790
time that it's called that outer function has returned.

42
00:02:44,070 --> 00:02:50,610
So this function inner is a closure just like the other example that we saw a couple of things to note

43
00:02:50,610 --> 00:02:51,010
here.

44
00:02:51,060 --> 00:02:56,280
We have to return the inner function for this to work and we also have the ability to call the outer

45
00:02:56,280 --> 00:03:01,620
function and then immediately call the inner function or store the result of the inner function in a

46
00:03:01,620 --> 00:03:05,400
variable and call it later which we commonly do.

47
00:03:05,970 --> 00:03:07,520
Let's try a quick exercise.

48
00:03:07,680 --> 00:03:15,540
See if you can figure out if either of these functions contain a closure puzzle video for a second.

49
00:03:15,750 --> 00:03:19,740
All right what did you come up with in this first function.

50
00:03:19,740 --> 00:03:25,410
We can see that the inner function is not making use of any variables to find in an outer function that

51
00:03:25,410 --> 00:03:26,400
has returned.

52
00:03:26,550 --> 00:03:31,320
So this one right here does not contain a closure in the second example.

53
00:03:31,320 --> 00:03:36,900
We can see that the inner function is making use of a variable called data which was defined in an outer

54
00:03:36,900 --> 00:03:41,610
function that has returned by the time the inner function will be called.

55
00:03:42,030 --> 00:03:47,980
So the first one is not but the second one is always go back to the definition of a closure.

56
00:03:48,150 --> 00:03:54,030
And if you see that the inner function is not making use of variables in an outer function it's probably

57
00:03:54,090 --> 00:03:56,650
not a closure.

58
00:03:56,820 --> 00:03:58,520
So when would you use a closure.

59
00:03:58,920 --> 00:04:04,200
Well a great use case for closures is to create the idea of a private variable in other languages.

60
00:04:04,200 --> 00:04:08,640
There exists support for variables that can't be modified externally which we call private variables

61
00:04:08,790 --> 00:04:11,520
but in javascript we don't have that built in.

62
00:04:11,520 --> 00:04:13,780
Thankfully closures can help us out with that.

63
00:04:13,800 --> 00:04:18,810
So let's take a look at this example in the chrome dev tools in a press command option Jagan and open

64
00:04:18,810 --> 00:04:23,960
that up and I'm going to write a function called counter and inside of this counter function.

65
00:04:23,970 --> 00:04:30,000
I'm going to make a variable called count so that equal to zero and inside of this counter function

66
00:04:30,090 --> 00:04:32,290
I'm going to return a new function.

67
00:04:32,340 --> 00:04:35,460
No notice right here that I am not giving this function a name.

68
00:04:35,460 --> 00:04:38,360
That is because these functions are anonymous.

69
00:04:38,490 --> 00:04:45,100
So if I want to name this function I can call this something like counting but I don't need to.

70
00:04:45,210 --> 00:04:50,230
And inside of this inner function I'm going to return plus plus count.

71
00:04:50,250 --> 00:04:55,380
And the reason that I'm doing plus plus here as a prefix operator is so that the first time that I call

72
00:04:55,380 --> 00:04:58,280
it it goes up to 1.

73
00:04:58,290 --> 00:05:04,500
Now I can set this counter function to be equal to a variable called C and I'll save R C is equal to

74
00:05:04,530 --> 00:05:07,010
counter.

75
00:05:07,020 --> 00:05:10,130
Now what do you think C is going to be when I take a look at it.

76
00:05:10,800 --> 00:05:12,230
Well just like we saw before.

77
00:05:12,300 --> 00:05:19,440
It's going to be a function definition and if I call C again I'm going to return the count incremented

78
00:05:19,590 --> 00:05:20,600
by 1.

79
00:05:20,670 --> 00:05:23,060
Let's call it again and again.

80
00:05:23,220 --> 00:05:29,790
But what's really nice about this is that no one has access to the variable count in the scope that

81
00:05:29,790 --> 00:05:30,920
I'm in right now.

82
00:05:31,050 --> 00:05:35,230
If I try to access count I'm going to get a reference are saying count is not defined.

83
00:05:35,370 --> 00:05:41,040
And since count is a private variable no one can come in and change with the value of count starts off

84
00:05:41,040 --> 00:05:43,360
at it's always going to be zero.

85
00:05:43,440 --> 00:05:46,810
Pause the video and try to copy this example in the chrome console.

86
00:05:46,910 --> 00:05:50,210
It will help out a lot with understanding how closures work.

87
00:05:50,880 --> 00:05:56,780
Let's take a look at another example of private variables inside of this classroom function.

88
00:05:56,790 --> 00:06:01,770
I have a variable called instructors which is an array of two strings called an LP.

89
00:06:01,830 --> 00:06:06,240
This classroom function returns an object with two functions.

90
00:06:06,450 --> 00:06:13,320
Get instructors and an instructor get instructors allows me to just display disarrayed at instructor

91
00:06:13,410 --> 00:06:18,500
is a function that takes in a parameter and adds it to the instructor's array.

92
00:06:18,570 --> 00:06:20,960
So where is there closure going on here.

93
00:06:21,180 --> 00:06:24,640
Well notice that the GET instructors an add instructor function.

94
00:06:24,720 --> 00:06:31,860
Both make use of this instructor's variable which is outside of this function here and this function

95
00:06:31,860 --> 00:06:33,060
here.

96
00:06:33,060 --> 00:06:40,320
So these two functions get instructors and add instructor are using variables defined in outer functions

97
00:06:40,680 --> 00:06:42,750
that have already returned.

98
00:06:42,750 --> 00:06:48,750
You can see right here they get instructors allows me to print out the array of Ellen colt and instructor

99
00:06:48,870 --> 00:06:52,250
allows me to add an instructor to that array and returns theory.

100
00:06:52,620 --> 00:06:58,470
But when I create a new classroom with another variable and I get the instructors we can see that Ian

101
00:06:58,470 --> 00:06:59,920
is not here.

102
00:07:00,000 --> 00:07:06,810
Finally through using closure we've made the instructors variable over here a private variable.

103
00:07:06,810 --> 00:07:12,990
No one can modify it so anytime that a classroom is created the instructors that you get are always

104
00:07:12,990 --> 00:07:14,530
going to be called an alley.

105
00:07:14,760 --> 00:07:19,380
So it looks like you're stuck with us for a little while so even though we have a small example here

106
00:07:19,680 --> 00:07:24,440
a lot of tools and technologies that you'll be learning about make use of closures quite a bit.

107
00:07:24,540 --> 00:07:28,560
So when you're looking at some of that code try your best to see if you can spot where those closures

108
00:07:28,560 --> 00:07:29,050
are.

109
00:07:29,250 --> 00:07:31,680
Well be sure to point out to you as well.

110
00:07:31,680 --> 00:07:32,830
So what do we learn.

111
00:07:32,850 --> 00:07:38,550
A closure exists when an inner function makes use of variables declared in outer function which has

112
00:07:38,550 --> 00:07:41,480
already returned and closure does not exist.

113
00:07:41,490 --> 00:07:47,250
If you do not return an inner function and if that inner function does not make use of variables returned

114
00:07:47,310 --> 00:07:52,980
by an outer function we also saw that we can use closures to create private variables and write better

115
00:07:52,980 --> 00:07:56,770
code to isolate our logic and our application.

116
00:07:57,690 --> 00:07:58,830
And that's it for closures.

117
00:07:58,830 --> 00:07:59,710
See you in the next video