1
00:00:02,420 --> 00:00:06,630
So let's explore what we learned about closures and functions in more detail

2
00:00:06,630 --> 00:00:08,690
and for this let's create a new function,

3
00:00:08,690 --> 00:00:13,850
again it doesn't really matter how you create it but I'll use the function declaration here and I will

4
00:00:13,850 --> 00:00:16,390
name this function greet user

5
00:00:16,520 --> 00:00:20,690
and in there, I want to console log Hi

6
00:00:20,760 --> 00:00:23,570
and then some user name variable.

7
00:00:23,580 --> 00:00:28,170
This doesn't exist yet but I'll create it out here, I'll set user name equal to Max or to whatever you

8
00:00:28,170 --> 00:00:31,700
want and this should also be user name with a capital N then.

9
00:00:31,830 --> 00:00:36,030
So if I call this function now, what would you expect to see in the console?

10
00:00:36,030 --> 00:00:38,990
Well you would probably expect to see Hi Max

11
00:00:38,990 --> 00:00:43,410
and if we reload, indeed that is what we see. Now that should be straightforward,

12
00:00:43,410 --> 00:00:47,830
we have user name here and we reference it from inside the function as you learned,

13
00:00:47,880 --> 00:00:55,250
you can reach out to variables or constants that are created outside of the function or as we just learned

14
00:00:55,260 --> 00:00:58,190
it, this function has its own lexical environment

15
00:00:58,320 --> 00:01:01,170
and in that functions environment, we basically have nothing,

16
00:01:01,170 --> 00:01:06,480
the only thing we actually have in there is a pointer at the outer lexical environment and there, we

17
00:01:06,480 --> 00:01:07,670
have a user name variable

18
00:01:07,770 --> 00:01:12,390
and since we do have access to the surrounding environments, we can access user name from inside of the

19
00:01:12,390 --> 00:01:12,840
function,

20
00:01:12,840 --> 00:01:14,730
that's not too new.

21
00:01:14,730 --> 00:01:20,210
Now what would you expect to see in the console if I change the user name to Manuel here?

22
00:01:20,250 --> 00:01:25,980
I change it after the function was created, at the point of time it is created user name is Max

23
00:01:26,100 --> 00:01:30,530
but before I call it. What would you expect to see in a console now?

24
00:01:30,540 --> 00:01:33,210
Hi Max or Hi Manuel?

25
00:01:33,290 --> 00:01:35,020
Well let's give it a try.

26
00:01:35,060 --> 00:01:40,520
We see Hi Manuel and again that is basically something I explained before as well.

27
00:01:40,790 --> 00:01:47,720
We got our user name here and it is in the environment outside of the function, it's not part of the

28
00:01:47,720 --> 00:01:52,410
functions own environment and therefore the function does close over this

29
00:01:52,490 --> 00:01:53,960
and would store username

30
00:01:54,020 --> 00:01:59,840
but as I said if that variable then changes, the function reflects that change.

31
00:01:59,840 --> 00:02:04,530
So it does not copy the value here when it is created and log that in,

32
00:02:04,580 --> 00:02:07,790
it just logs in the variable itself

33
00:02:07,790 --> 00:02:10,350
you could say, access to the variable

34
00:02:10,370 --> 00:02:14,810
you could say, not the value of the variable. Hence when you call the function,

35
00:02:14,810 --> 00:02:17,730
indeed then it gets the latest value

36
00:02:17,780 --> 00:02:22,610
it can find for that variable and that is the value we set here.

37
00:02:24,370 --> 00:02:26,260
Now let's get a bit more tricky,

38
00:02:26,260 --> 00:02:35,330
what if I add a name variable here inside of that function and I basically store whatever is in user

39
00:02:35,330 --> 00:02:38,440
name in the name and then I add name here?

40
00:02:38,480 --> 00:02:45,440
So I still reference user name here but I store it in a new variable and then I use that internal variable

41
00:02:45,440 --> 00:02:49,400
here, now name is part of the environment of the function,

42
00:02:49,400 --> 00:02:56,000
so of the lexical environment of the function itself, it however points or it refers to user name which

43
00:02:56,000 --> 00:02:59,940
is part of the outer lexical environment, what would you expect now?

44
00:03:00,200 --> 00:03:03,980
Hi Manuel or Hi Max? Let's give it a try,

45
00:03:05,160 --> 00:03:07,650
we again see Hi Manuel

46
00:03:07,650 --> 00:03:13,290
and the reason for it is the same as before, we do refer to that user name variable inside of our

47
00:03:13,290 --> 00:03:13,790
function

48
00:03:13,800 --> 00:03:20,430
but when the function executes, it reaches out to that surrounding lexical environment to which it holds

49
00:03:20,430 --> 00:03:26,250
a pointer, so to which the functional the pointer and gets the latest value from there, which is why we

50
00:03:26,250 --> 00:03:27,670
see this.

51
00:03:27,750 --> 00:03:37,530
Now what do you think happens if I create a new variable in here where I store Anna inside of the create

52
00:03:37,600 --> 00:03:44,590
user function and thereafter I create that same variable where I store Maximilian outside of the create

53
00:03:44,590 --> 00:03:49,630
user function? So I have the same variable here, same variable name in the inner function and in the outer

54
00:03:49,630 --> 00:03:50,280
function,

55
00:03:50,350 --> 00:03:51,730
what do you expect to get now?

56
00:03:51,730 --> 00:03:54,710
Hi Anna or Hi Maximilian?

57
00:03:54,730 --> 00:03:56,490
Well let's reload,

58
00:03:56,680 --> 00:03:57,060
we see

59
00:03:57,070 --> 00:03:57,710
Hi Anna

60
00:03:57,730 --> 00:04:04,420
and that shouldn't come as a surprise because name here is created as a variable inside of the function.

61
00:04:04,420 --> 00:04:09,220
Now you also learned earlier that you can have a function with the same name outside and inside of

62
00:04:09,220 --> 00:04:09,940
the function,

63
00:04:09,940 --> 00:04:16,720
this is a concept called shadowing, the inner function, the inner environment you would say wins over

64
00:04:16,720 --> 00:04:18,550
the outer environment.

65
00:04:18,550 --> 00:04:23,720
So this function has its own lexical environment and there it adds a name variable,

66
00:04:23,740 --> 00:04:30,040
it also adds a pointer at the outer lexical environment and there, it also at the time it runs will have

67
00:04:30,040 --> 00:04:31,470
a name variable

68
00:04:31,530 --> 00:04:38,460
but and that's really important, when the function executes, it first of course checks its inner environment

69
00:04:38,470 --> 00:04:44,880
and only if it doesn't find a variable there, then it goes to the next level, to the outer environment,

70
00:04:44,950 --> 00:04:50,260
so the environment of a surrounding function or the global environment and then it checks that outer

71
00:04:50,350 --> 00:04:52,600
environment for that variable of that name

72
00:04:52,600 --> 00:04:55,670
but here we do have that variable inside of the function

73
00:04:55,750 --> 00:04:59,130
so there's no need to go to the outer one and look for this name

74
00:04:59,230 --> 00:05:04,900
and that's what we see Hi Anna. Things of course would be different if I would comment out the name

75
00:05:04,930 --> 00:05:06,910
declaration inside of that function.

76
00:05:06,910 --> 00:05:12,430
Now I still refer to a name variable which wasn't even declared when the function was created but which

77
00:05:12,430 --> 00:05:18,450
was declared before the function was called and therefore here if I reload, we indeed see Hi Maximilian

78
00:05:18,460 --> 00:05:24,760
because now we can't find the name variable on the inner lexical environment and therefore we have to

79
00:05:24,760 --> 00:05:28,900
reach out to the next one in line which in this case is the global lexical environment

80
00:05:28,960 --> 00:05:31,590
and there, we find that name.

81
00:05:31,630 --> 00:05:36,590
So these are functions and closures with this scope environment thing.

82
00:05:36,610 --> 00:05:42,430
Now it's not brand new, you learned about scope before and scope, what I called scope there basically

83
00:05:42,430 --> 00:05:44,290
is this lexical environment thing,

84
00:05:44,380 --> 00:05:49,950
scope is all about having different scopes for functions, for if blocks, for for loops and so on,

85
00:05:50,170 --> 00:05:55,600
so for everything with curly braces as you learned and in the end, that scope is just about creating

86
00:05:55,600 --> 00:06:01,210
such a lexical environment for these curly braces and therefore it's not just functions or the global

87
00:06:01,210 --> 00:06:08,680
scope which in the end yield that lexical environment, a for loop has its own scope or lexical environment

88
00:06:08,740 --> 00:06:10,990
and the same is true for an if statement.

89
00:06:11,050 --> 00:06:14,120
So you can also use these terms interchangeably here,

90
00:06:14,140 --> 00:06:17,160
the important thing to remember is how functions

91
00:06:17,230 --> 00:06:24,270
and by the way also if statements and so on are able to access outer environments and refer to them

92
00:06:24,280 --> 00:06:30,550
and the special thing about functions just is that they log in the surrounding environment and its

93
00:06:30,550 --> 00:06:36,580
variables so that they can remember it and use it when the function eventually gets called even if that

94
00:06:36,760 --> 00:06:41,130
logged in variable wasn't used outside of the function before

95
00:06:41,230 --> 00:06:47,050
so that Javascript does not dispose of these unused variables but keeps them so that the function that

96
00:06:47,050 --> 00:06:51,540
might be interested still can use that, this is how you can think about that

97
00:06:51,610 --> 00:06:55,360
and that's the important thing about understanding closures. Functions

98
00:06:55,360 --> 00:06:58,300
remember the surrounding variables

99
00:06:58,300 --> 00:06:58,810
you could say.