1
00:00:00,752 --> 00:00:03,085
We will review this with an example, but

2
00:00:03,085 --> 00:00:06,252
before that, let's take a look at

3
00:00:06,252 --> 00:00:07,863
closures. We've already looked at how

4
00:00:07,863 --> 00:00:09,752
variables and nested functions go out of

5
00:00:09,752 --> 00:00:12,352
scope once the function or block they're

6
00:00:12,352 --> 00:00:14,974
contained in completes execution. However,

7
00:00:14,974 --> 00:00:17,085
there are times when we would want to hold

8
00:00:17,085 --> 00:00:20,252
onto them, even after a function is

9
00:00:20,252 --> 00:00:22,466
executed. Closures allows us to do just

10
00:00:22,466 --> 00:00:26,843
that. Here's a familiar example. We have a

11
00:00:26,843 --> 00:00:29,752
variable greeting that is set to an IIFE.

12
00:00:29,752 --> 00:00:31,530
The body of the IIFE contains a variable

13
00:00:31,530 --> 00:00:35,252
message set to Hello and another variable

14
00:00:35,252 --> 00:00:36,752
getMessage set to an anonymous function

15
00:00:36,752 --> 00:00:40,085
that just returns the message variable. If

16
00:00:40,085 --> 00:00:42,419
you try to print greeting.message, we get

17
00:00:42,419 --> 00:00:45,002
undefined as the message variable is out

18
00:00:45,002 --> 00:00:48,181
of scope. So how do we prevent message and

19
00:00:48,181 --> 00:00:51,641
getMessage from going out of scope? We use

20
00:00:51,641 --> 00:00:55,002
closures as shown in the next slide. This

21
00:00:55,002 --> 00:00:57,323
is the same as the last example, but we

22
00:00:57,323 --> 00:01:00,085
create a closure right here. Return object

23
00:01:00,085 --> 00:01:03,609
with the property getMessage, and the

24
00:01:03,609 --> 00:01:05,752
value is the function getMessage.

25
00:01:05,752 --> 00:01:07,752
Typically, the property and value names

26
00:01:07,752 --> 00:01:10,752
are the same, but they don't have to be.

27
00:01:10,752 --> 00:01:13,952
This object is what gets assigned to the

28
00:01:13,952 --> 00:01:16,752
greeting variable. At the very bottom, we

29
00:01:16,752 --> 00:01:21,002
log the greeting.getmessage output. Here's

30
00:01:21,002 --> 00:01:23,252
another example of when we would want to

31
00:01:23,252 --> 00:01:26,530
use a closure. We have a setupCounter

32
00:01:26,530 --> 00:01:28,919
function with one input parameter. Inside

33
00:01:28,919 --> 00:01:30,952
the body of this function, we return

34
00:01:30,952 --> 00:01:33,609
another function counter that simply

35
00:01:33,609 --> 00:01:36,196
increments the input parameter val. Next,

36
00:01:36,196 --> 00:01:38,863
we invoke the setupCounter with the

37
00:01:38,863 --> 00:01:42,323
argument 0 and assign it to the variable

38
00:01:42,323 --> 00:01:44,895
counter1. We then invoke the counter1

39
00:01:44,895 --> 00:01:46,752
setupCounter again with the argument 10

40
00:01:46,752 --> 00:01:49,752
and assign it to the variable counter2.

41
00:01:49,752 --> 00:01:52,752
Finally, we invoke the counter2 function,

42
00:01:52,752 --> 00:01:56,127
and print the output to the console. This

43
00:01:56,127 --> 00:01:59,877
time we see an output of 10. In this way,

44
00:01:59,877 --> 00:02:01,377
different invocations of setupCounter

45
00:02:01,377 --> 00:02:03,466
function produce different functions with

46
00:02:03,466 --> 00:02:06,502
their own context and variables. Let's run

47
00:02:06,502 --> 00:02:10,085
this example in Visual Studio Code in our

48
00:02:10,085 --> 00:02:13,252
demo. We define our setupCounter function

49
00:02:13,252 --> 00:02:15,895
as discussed earlier. Next, we are setting

50
00:02:15,895 --> 00:02:18,752
up two functions, counter1 and counter2.

51
00:02:18,752 --> 00:02:21,085
Each of them have their own environment

52
00:02:21,085 --> 00:02:24,252
and variables, and anytime we call either

53
00:02:24,252 --> 00:02:26,652
counter1 or counter2, the variable that

54
00:02:26,652 --> 00:02:29,752
was initially set up in the context is

55
00:02:29,752 --> 00:02:32,852
incremented. Let's run it, and we can see

56
00:02:32,852 --> 00:02:35,252
the expected output. Calling the counter

57
00:02:35,252 --> 00:02:41,000
function again keeps incrementing the value returned.

