Original subtitles

1 1

Let's now talk about 2

2

a fundamental property of the JavaScript language. 3

3

Which is the fact that it has first class functions. 4

4

This enables us to write higher order functions. 5

5

But what's that all about? 6

6

Well, let's see. 7

7

So, JavaScript is a language that has first class functions 8

8

which in technical terms 9

9

means that functions are so-called first citizens. 10

10

In practice, that means that functions 11

11

are simply treated as values. 12

12

And we already touched on that idea 13

13

a couple of times before, 14

14

but this is such an important feature of the language 15

15

that it's worth spending some more time talking about this. 16

16

Now, why does JavaScript work this way? 17

17

Well, it's simply because functions 18

18

are really just another type of objects in JavaScript. 19

19

And since objects are values, 20

20

functions are values too. 21

21

And since functions are values, 22

22

there is a bunch of interesting things 23

23

that we can do with them, 24

24

like storing them in variables or object properties. 25

25

And that, of course, 26

26

we already did a couple of times before. 27

27

So the function values here are marked in red, 28

28

and then you see, we create a function expression 29

29

in the first example and an object method 30

30

in the second example. 31

31

So the value in the red rectangle 32

32

is the function value itself, 33

33

that we can store wherever we like. 34

34

We can also pass functions as arguments to other functions. 35

35

And we actually already did that before 36

36

when adding event listeners or event handlers 37

37

to dumb objects. 38

38

So here we have the add event listener function 39

39

that you already know, 40

40

and we clearly passed the greet function 41

41

into the add event list note function 42

42

here as a value, right? 43

43

Now to make it even more interesting, 44

44

we can also return a function from another function. 45

45

That sounds kind of crazy, 46

46

but it can be very useful. 47

47

Finally, remember that functions are objects. 48

48

And many types of objects in JavaScript have methods, right? 49

49

Like array methods, for example. 50

50

And actually there are also function methods. 51

51

So methods that we can call on functions. 52

52

So again, that sounds a bit crazy, right? 53

53

But we will see how to use this to our advantage 54

54

throughout this section. 55

55

This bind method here is an example of that. 56

56

And again, we will learn about the bind method 57

57

as we go through the section. 58

58

All right. 59

59

Now the fact that JavaScript has first-class functions 60

60

makes it possible for us to use and write 61

61

higher order functions. 62

62

So a higher order function 63

63

is either a function that receives another function 64

64

as an argument, 65

65

or a function that returns a new function. 66

66

So let's check out both types here. 67

67

First, for functions that receive another function. 68

68

we have the same example as before. 69

69

So here, the add event listener function 70

70

is the higher order function. 71

71

And why? 72

72

Well, because it receives another function as an input. 73

73

In this case, the greet function. 74

74

And we usually say that the function that is passed in 75

75

is a callback function. 76

76

That's because the callback function will be called later 77

77

by the higher order function. 78

78

In this case, 79

79

add event listener will call the greet callback later 80

80

as soon as the click event happens. 81

81

It's like the greet function saying, 82

82

"Hey there, don't greet me yet, 83

83

but call me back once you're ready." 84

84

And this works, not only in the context 85

85

of the add event listener function, 86

86

but in many other use cases as well. 87

87

Okay, second, 88

88

we can also have functions that return another function. 89

89

So we have the higher order function here. 90

90

So basically this whole code block, 91

91

which clearly returns a new function, 92

92

which is this one. 93

93

And this style of functions 94

94

is also used a lot in JavaScript. 95

95

But it's also more advanced, 96

96

and I guess harder to understand. 97

97

I will show it to you in the next lecture, 98

98

but we will explore this deeper a bit later. 99

99

Now, just to finish, 100

100

there seems to be some confusion between 101

101

first-class functions and higher order functions. 102

102

Some people think that they are the same thing. 103

103

But actually they mean different things. 104

104

So, first class functions is just a feature 105

105

that a programming language either has or does not have. 106

106

All it means is that all functions are values. 107

107

That's it. 108

108

There are no first class functions in practice, okay? 109

109

It's just a concept. 110

110

There are however higher order functions in practice, 111

111

which are possible because the language supports 112

112

first class functions. 113

113

So it's a subtle difference, 114

114

but still worth noting if you want to be able to talk 115

115

like a true JavaScript master. 116

116

Great. 117

117

Now in the next lecture, 118

118

let's actually create or own higher order functions.