1
00:00:02,160 --> 00:00:07,160
So now that we had a look at functions inside of functions, which is quite interesting,

2
00:00:07,180 --> 00:00:10,180
let me come back to that add event listener thing, there

3
00:00:10,210 --> 00:00:16,690
I'm passing a function as an argument, an anonymous function which I create here in place as I explained.

4
00:00:16,780 --> 00:00:19,570
Now, I already mentioned it at the beginning of this module,

5
00:00:19,570 --> 00:00:26,950
what we're effectively doing here therefore is we're passing a pointer at a function to another function.

6
00:00:26,950 --> 00:00:33,790
So this function here is effectively a parameter or a value for a parameter of the add event listener

7
00:00:33,790 --> 00:00:34,630
function

8
00:00:34,780 --> 00:00:37,180
and that's a pattern you will see in Javascript a lot,

9
00:00:37,180 --> 00:00:43,390
you can also build for your own functions but especially built-in functions will often have

10
00:00:43,470 --> 00:00:50,500
this behavior where you need to provide them with a function, typically all built-in functions that do

11
00:00:50,500 --> 00:00:57,160
something which is event based or which takes a bit longer because this is a pattern called a callback

12
00:00:57,160 --> 00:01:02,710
function. In the end what you you're doing here is you're creating a function, either in place with this

13
00:01:02,710 --> 00:01:08,380
anonymous function or you store that in in a constant before, doesn't matter and you're just passing a

14
00:01:08,380 --> 00:01:10,600
pointer at the function to add event listener,

15
00:01:10,630 --> 00:01:12,430
that's what you already learned.

16
00:01:12,550 --> 00:01:16,370
Now you never call the function yourself, right, the browser,

17
00:01:16,390 --> 00:01:21,670
so the thing behind add event listener in the end, calls it for you when that click event in this case

18
00:01:21,700 --> 00:01:23,020
occurs.

19
00:01:23,020 --> 00:01:30,340
Now this is called a callback function therefore because it's called for you by something else, you

20
00:01:30,340 --> 00:01:32,750
can't control when exactly it's called,

21
00:01:32,860 --> 00:01:38,830
it's just coming back at you, it's called for you at some point in the future and therefore this, for example

22
00:01:38,830 --> 00:01:44,650
for events, is the core pattern because you can't execute the function on your own, you don't know when

23
00:01:44,650 --> 00:01:50,500
the click occurs, you just want to give the browser the function or a pointer at a function to execute

24
00:01:50,500 --> 00:01:51,140
for you.

25
00:01:51,160 --> 00:01:56,890
That's why in this case you pass a function as a value for an argument to another function because

26
00:01:56,890 --> 00:01:59,850
the browser needs that function to do its job, I

27
00:01:59,860 --> 00:02:01,480
hope that makes sense.

28
00:02:01,510 --> 00:02:07,090
Now you can also build your own function that takes a function as an argument. Let's say the sum up

29
00:02:07,090 --> 00:02:13,060
function here should actually not to return the sum here but instead it should execute a function which

30
00:02:13,060 --> 00:02:16,900
we pass to it which then gets the sum as an argument.

31
00:02:16,900 --> 00:02:22,040
So I'll replace a and b here with a new parameter and you can name it however you want,

32
00:02:22,030 --> 00:02:26,860
you'll often see names like cb for callback but you can name it however you want,

33
00:02:26,860 --> 00:02:31,690
so I'll name it result handler to make it really clear that this is kind of a function which will do

34
00:02:31,690 --> 00:02:34,480
something with the result of this calculation.

35
00:02:34,480 --> 00:02:40,870
So here once we're done, instead of returning, I'll use this result handler parameter and since it will

36
00:02:40,870 --> 00:02:47,130
be a function or a pointer at a function, I can execute it as a function by adding parentheses, right?

37
00:02:47,140 --> 00:02:47,940
Hope that makes sense,

38
00:02:47,950 --> 00:02:51,000
it will be a function so I can execute it as such.

39
00:02:51,040 --> 00:02:54,460
Now we'll pass sum to that function,

40
00:02:54,520 --> 00:03:02,000
it's now our job to make sure that when we call sum up, we do provide this function. So for this, I'll

41
00:03:02,000 --> 00:03:05,850
actually create yet another new function here, show result

42
00:03:05,870 --> 00:03:10,300
or however you want to call it, with any of the three ways of building a function you want,

43
00:03:10,310 --> 00:03:11,900
again that does not matter here,

44
00:03:13,010 --> 00:03:14,840
I'm missing a semicolon here by the way

45
00:03:14,840 --> 00:03:15,970
now that I saw it.

46
00:03:16,290 --> 00:03:18,650
So show result like this

47
00:03:18,650 --> 00:03:28,890
and there I want to use the alert function to show the result, the result after adding all numbers is

48
00:03:29,250 --> 00:03:31,270
and then simply show the sum here

49
00:03:32,870 --> 00:03:34,310
for the result.

50
00:03:34,310 --> 00:03:37,590
So I expect to get the result here in this show result

51
00:03:37,640 --> 00:03:42,740
function as an argument and therefore I can use it here and I can expect that I get it as an argument

52
00:03:42,740 --> 00:03:48,410
here because this will be the function which I pass to sum up in the end as a first argument and

53
00:03:48,410 --> 00:03:53,420
therefore, that will be what is used as a result handler, that will be called and an argument will be

54
00:03:53,420 --> 00:03:54,680
passed to it.

55
00:03:54,740 --> 00:04:01,280
So sum which is passed to result handler here will in the end be the argument I receive here in show

56
00:04:01,280 --> 00:04:08,720
result because show result is now what I pass to sum up as a first argument, of course without parentheses

57
00:04:08,870 --> 00:04:14,120
just as we did it for add event listener because I don't want to execute it here, I want to give sum up

58
00:04:14,120 --> 00:04:20,600
the chance of executing it for me. So I pass show result here to both sum up and to the other sum up

59
00:04:20,600 --> 00:04:27,560
call, not to subtract up because there we don't support this yet but pass it to sum up, like this as a

60
00:04:27,560 --> 00:04:28,840
first argument.

61
00:04:28,880 --> 00:04:33,740
Therefore in sum up, this is received here on this result handler parameter,

62
00:04:33,740 --> 00:04:39,060
so this is now a pointer at a function, therefore we execute it here and we pass sum to it

63
00:04:39,140 --> 00:04:44,000
and since the function that will be executed is this function, sum will in the end be the value for

64
00:04:44,000 --> 00:04:46,620
result here and will show up in our alert,

65
00:04:46,640 --> 00:04:48,370
that's the theory at least.

66
00:04:48,560 --> 00:04:54,260
Let's give this a try and let's reload this page and indeed I get an alert with 19 and 142

67
00:04:54,260 --> 00:05:01,250
and I get undefined here because I still console log the result. Now since sum up doesn't return

68
00:05:01,250 --> 00:05:02,030
anything anymore,

69
00:05:02,030 --> 00:05:07,250
this won't work so we should get rid of that and instead, take advantage of our show result function

70
00:05:07,250 --> 00:05:08,470
which we now pass.

71
00:05:08,480 --> 00:05:12,440
So this is a callback function and how we can build it on our own.

72
00:05:12,440 --> 00:05:18,080
Now again, this is how you can build it on your own, often or in a lot of cases, you won't need to build

73
00:05:18,080 --> 00:05:23,360
it on your own because of course here, there's nothing wrong with just returning the sum here and then

74
00:05:23,360 --> 00:05:29,180
using it in the place where you called sum up but throughout your career as a web developer, as a Javascript

75
00:05:29,180 --> 00:05:35,450
developer, you will also encounter cases where you want to write functions which actually take such a

76
00:05:35,450 --> 00:05:41,660
callback function and then do something with it and a lot of the built-in functions in Javascript support

77
00:05:41,660 --> 00:05:44,540
this pattern, especially all the event listeners and so on,

78
00:05:44,570 --> 00:05:51,020
so everything that's related to actions which occur in an unpredictable way or which take very long and

79
00:05:51,020 --> 00:05:54,020
therefore here it's nice to know what's happening behind the scenes

80
00:05:54,080 --> 00:05:58,000
when you use these internal functions like add event listener, right,

81
00:05:58,010 --> 00:06:00,350
because that's exactly the pattern we use there.

82
00:06:00,380 --> 00:06:05,480
There, I'm passing in an anonymous function but as you learned, that's essentially the same as pointing

83
00:06:05,480 --> 00:06:06,740
at a named function like this.