1
00:00:02,130 --> 00:00:04,960
So let's come back to that anonymous function thing. Here,

2
00:00:05,200 --> 00:00:06,780
I created an anonymous function,

3
00:00:06,820 --> 00:00:08,650
we could have assigned a name as you saw,

4
00:00:08,800 --> 00:00:14,380
it doesn't matter here and I'll come back to what a tiny difference is in a second but we can also

5
00:00:14,380 --> 00:00:17,750
create it like this because we don't really need the name here.

6
00:00:17,750 --> 00:00:22,250
Now that's one place where you could use anonymous functions because you store them in a variable and

7
00:00:22,250 --> 00:00:26,600
then the name of the variable is the name by which you call and by which you reference the function

8
00:00:26,630 --> 00:00:29,000
as we're doing it down there when we add the event listener,

9
00:00:29,000 --> 00:00:34,430
so that's one thing but you can also use anonymous functions in places where you don't even store them

10
00:00:34,430 --> 00:00:35,600
in variables

11
00:00:35,600 --> 00:00:41,030
and one place would exactly be a scenario like this one where you add an event listener. You might add

12
00:00:41,030 --> 00:00:46,860
an event listener here and you can do so by defining an anonymous function in place here where you

13
00:00:46,880 --> 00:00:47,470
need it.

14
00:00:47,660 --> 00:00:48,690
Now important,

15
00:00:48,830 --> 00:00:54,020
this is basically the same as if you define it before and store it in some variable and then just reference

16
00:00:54,020 --> 00:00:55,120
the variable here.

17
00:00:55,130 --> 00:00:58,420
This will not immediately execute the function,

18
00:00:58,550 --> 00:00:59,410
why would it,

19
00:00:59,450 --> 00:01:04,550
there are no parentheses after it, which by the way could write, this is valid Javascript syntax.

20
00:01:04,550 --> 00:01:08,900
This would now immediately execute the anonymous function but this is not what we do here, this is not what

21
00:01:08,900 --> 00:01:09,720
we need here,

22
00:01:09,770 --> 00:01:16,550
instead this just creates a function in place and kind of passes the reference of this anonymous on the

23
00:01:16,550 --> 00:01:19,700
fly created function to add event listener.

24
00:01:19,700 --> 00:01:20,780
Now why would we do that?

25
00:01:21,110 --> 00:01:26,720
Because maybe, we have no other place in our entire code where we ever need that function again.

26
00:01:26,720 --> 00:01:29,110
Indeed that's actually the case for start here,

27
00:01:29,120 --> 00:01:30,350
I can comment this out,

28
00:01:30,350 --> 00:01:34,070
I will only call it when I click this button here.

29
00:01:34,070 --> 00:01:39,120
So I will just move my code which I had in there into this anonymous function and I'm fine.

30
00:01:39,240 --> 00:01:43,820
There is nothing wrong with having a separate function and as you learned in the behind the scenes

31
00:01:43,820 --> 00:01:48,530
module, there might even be some memory leak considerations you want to take into account

32
00:01:48,530 --> 00:01:52,970
but if you know you only add an event listener once here, then this doesn't really matter,

33
00:01:52,970 --> 00:01:58,660
so there isn't a way of creating a memory leak here and then it just saves us some code

34
00:01:58,660 --> 00:02:04,630
and if someone else reads your code, he or she doesn't have to find that function you're referencing

35
00:02:04,630 --> 00:02:09,850
here, so if I read that for example, I have to look where the start function is, there it is.

36
00:02:09,850 --> 00:02:12,330
So I don't have to do that if you use an anonymous function,

37
00:02:12,430 --> 00:02:14,890
instead everything is defined in place here

38
00:02:14,980 --> 00:02:19,940
and by just looking at this line, I fully understand what's going to happen when this button is clicked.

39
00:02:19,960 --> 00:02:27,400
So this is a prominent scenario for using an anonymous function, event listeners or any use cases where

40
00:02:27,400 --> 00:02:33,490
you pass a function, a reference to a function to another function, which is effectively what we're

41
00:02:33,490 --> 00:02:34,150
doing here,

42
00:02:34,180 --> 00:02:34,770
right?

43
00:02:34,870 --> 00:02:40,810
We're passing a reference to this anonymous function or before to the start function to this add event

44
00:02:40,810 --> 00:02:41,980
listener function.

45
00:02:41,980 --> 00:02:46,270
So this function actually takes a function as an argument if you think about it like this, something

46
00:02:46,270 --> 00:02:51,340
we'll also have a closer look at in this module and therefore this is a great scenario for using such an anonymous

47
00:02:51,340 --> 00:02:52,020
function

48
00:02:52,150 --> 00:02:56,020
if you never need that same function in any other place in your code.

49
00:02:56,080 --> 00:03:00,930
So if I save that and we reload, you will see that works just fine,

50
00:03:01,150 --> 00:03:08,050
so I can click this button because my event listener was added with this anonymous function. So why might

51
00:03:08,050 --> 00:03:11,060
you still assign a name to this anonymous function though?

52
00:03:11,230 --> 00:03:15,230
Because maybe that function throws an error. Let's say here,

53
00:03:15,280 --> 00:03:20,860
I'm also trying to log age which is a variable which just doesn't exist, neither locally in that anonymous

54
00:03:20,860 --> 00:03:25,630
function because of course anonymous functions, just like other functions, have their own local scope.

55
00:03:26,170 --> 00:03:29,800
So neither there nor globally, nor in any other file,

56
00:03:29,860 --> 00:03:32,350
so age here doesn't work.

57
00:03:32,470 --> 00:03:39,070
Side note, name would work because there's a default name global variable available in your script, made

58
00:03:39,070 --> 00:03:40,240
available by the browser,

59
00:03:40,360 --> 00:03:45,190
so don't use name here but age will not be available and therefore if I reload here and I click the

60
00:03:45,190 --> 00:03:46,970
button, I get an error.

61
00:03:46,990 --> 00:03:51,820
Now what you'll see is if you want to find that error, of course it gives us the line number, so

62
00:03:51,820 --> 00:03:52,880
that helps us

63
00:03:53,170 --> 00:03:57,490
but what if we don't see here is the name of the function where this problem occurred.

64
00:03:57,490 --> 00:04:02,620
Now since we have the line number, that might not matter but if you have a huge script and maybe you're

65
00:04:02,620 --> 00:04:07,900
even running some automatically optimized version here in the browser, where the line number which is

66
00:04:07,900 --> 00:04:14,110
shown here might not meet the line number you have in your code, then it would be nice to see the function

67
00:04:14,110 --> 00:04:16,900
name here and we don't.

68
00:04:16,900 --> 00:04:18,130
Now that's different

69
00:04:18,130 --> 00:04:23,920
if we use a function defined in the old school style and old school is kind of a dangerous word because

70
00:04:23,920 --> 00:04:25,590
it's perfectly fine to use that

71
00:04:26,020 --> 00:04:28,510
but if I would define my function like this,

72
00:04:28,510 --> 00:04:32,500
so not storing it in a constant or a variable but just declaring it like this

73
00:04:32,890 --> 00:04:39,640
and I had the same code in here and I would then temporarily replace this anonymous function with that,

74
00:04:39,640 --> 00:04:44,410
then you will see if we do this and we therefore encounter the same error,

75
00:04:44,410 --> 00:04:47,000
it actually gives us a hint at the function name here,

76
00:04:47,020 --> 00:04:52,560
it mentions that this is the start function. On the other hand when using an anonymous function here,

77
00:04:52,560 --> 00:04:58,020
so if I revert all of that, if I use that anonymous function as we did before and we reload and we

78
00:04:58,020 --> 00:05:04,590
reproduce this error, here it says anonymous because that's what it is, an anonymous function.

79
00:05:04,740 --> 00:05:10,170
Now we can mitigate this by giving this a name, start game or whatever you want.

80
00:05:10,350 --> 00:05:17,340
You can't call this function by that name as you learned, it's not declared and managed globally by Javascript

81
00:05:17,850 --> 00:05:23,130
but that name is used for debugging, for throwing errors by the browser.

82
00:05:23,130 --> 00:05:27,780
So if I now reload this and I produce this, you see start game here.

83
00:05:27,780 --> 00:05:31,360
So that's a reason why you might want to give your anonymous functions a name,

84
00:05:31,380 --> 00:05:37,260
you don't have to, obviously with the line number we would have found the problematic line as well but

85
00:05:37,260 --> 00:05:43,320
it is worth a thought and this is why you might still want to assign names to your anonymous functions,

86
00:05:43,320 --> 00:05:47,090
here I don't really need it because I don't plan on adding this error here

87
00:05:47,220 --> 00:05:52,140
so I'm fine like this but that's just a tiny additional thing you should know about anonymous functions.