1
00:00:02,170 --> 00:00:06,940
Now let's have a look at a different way of defining functions.

2
00:00:06,940 --> 00:00:09,040
We right now always use the function keyword

3
00:00:09,070 --> 00:00:14,860
no matter if we use the expression syntax, which we have here or if we use the declaration syntax which

4
00:00:14,860 --> 00:00:20,230
we used earlier, where you just had function, some function and so on, right?

5
00:00:20,230 --> 00:00:23,040
So that were the two ways we used to create functions.

6
00:00:23,050 --> 00:00:29,380
Now whenever you have an anonymous function, you can also use a different syntax and for that syntax

7
00:00:29,380 --> 00:00:29,680
here,

8
00:00:29,710 --> 00:00:31,680
let's start with get winner,

9
00:00:31,690 --> 00:00:34,450
you can remove the function keyword

10
00:00:34,510 --> 00:00:36,070
and now we would get an error

11
00:00:36,280 --> 00:00:43,120
but now you add, between the parameter list and the function body, you add an equal sign and a greater

12
00:00:43,120 --> 00:00:43,700
than sign.

13
00:00:43,810 --> 00:00:45,700
So that looks like an arrow here,

14
00:00:45,700 --> 00:00:46,230
right,

15
00:00:46,240 --> 00:00:49,440
it's an equal sign and a greater than sign without a whitespace in between,

16
00:00:49,450 --> 00:00:50,700
that would be a syntax error,

17
00:00:50,710 --> 00:00:55,930
so there must not be any whitespace between and this is now a special keyword in the end

18
00:00:55,930 --> 00:01:02,440
understood by Javascript, has nothing to do with the assignment operator or the greater than operator.

19
00:01:02,440 --> 00:01:08,470
So this combined is a new keyword just made up of mathematical signs I guess

20
00:01:08,470 --> 00:01:12,080
and this constructs a so-called arrow function

21
00:01:12,340 --> 00:01:14,290
and I guess you can see where the name is coming from.

22
00:01:15,040 --> 00:01:18,070
So what's special about such an arrow function?

23
00:01:18,070 --> 00:01:20,950
Well obviously we build it in a different way,

24
00:01:20,950 --> 00:01:23,740
there also is only this expression syntax,

25
00:01:23,740 --> 00:01:27,510
so where you could use function, some function like this.

26
00:01:27,580 --> 00:01:32,020
There is no equivalent for arrow function, so you can't define an arrow function like this,

27
00:01:32,020 --> 00:01:37,990
I mean you can but it's not doing anything, it has no name, you can't assign a name to it,

28
00:01:38,020 --> 00:01:44,500
you always have to store it in some variable or use it in a place where you would use an anonymous function,

29
00:01:44,500 --> 00:01:48,580
so it's an anonymous function where you can't assign a name in any way.

30
00:01:48,580 --> 00:01:53,440
So you always use it on the right side of the equal sign or in places like down here with the event

31
00:01:53,440 --> 00:01:54,070
listener,

32
00:01:54,070 --> 00:01:59,800
so whenever you will need to pass in a function and whenever you can use an anonymous function.

33
00:01:59,800 --> 00:02:05,580
So that's of course one striking difference and this might sound more like a disadvantage than an advantage.

34
00:02:05,620 --> 00:02:07,720
Well the advantage is it's a bit shorter,

35
00:02:07,720 --> 00:02:12,720
you save the extra function keyword and obviously that's not much to type but it's a bit shorter

36
00:02:12,790 --> 00:02:17,990
but in addition to that, this function syntax has some extra tricks up on its sleeve.

37
00:02:18,060 --> 00:02:25,120
Now there's one neat behavior which we'll only understand a bit later related to objects and how arrow

38
00:02:25,120 --> 00:02:26,910
functions can help us there,

39
00:02:26,920 --> 00:02:28,440
so we'll come back to that later

40
00:02:28,480 --> 00:02:34,010
but even without objects and without that thing, there already are some nice things we can do with it

41
00:02:34,030 --> 00:02:41,180
for example, you can shorten this code here in a very convenient way when using such an arrow function.

42
00:02:41,440 --> 00:02:44,220
Let's write this code as a ternary expression

43
00:02:44,260 --> 00:02:50,080
and that's kind of borderline because it will be a rather long and a bit nested ternary expression but

44
00:02:50,080 --> 00:02:51,400
you can do it.

45
00:02:51,400 --> 00:02:54,670
So you could write a ternary expression which you immediately return,

46
00:02:54,670 --> 00:02:59,910
so where you return the result where you make this comparison like that

47
00:03:00,340 --> 00:03:03,870
and if that's true, you obviously return result draw,

48
00:03:03,940 --> 00:03:04,320
right.

49
00:03:04,330 --> 00:03:08,840
That's how a ternary expression works, condition, then your result

50
00:03:08,860 --> 00:03:11,090
if that is true and then an else case

51
00:03:11,100 --> 00:03:14,520
and now in that else case, we add yet another ternary expression,

52
00:03:14,530 --> 00:03:18,250
so yet another condition which is this longer condition

53
00:03:18,430 --> 00:03:23,480
and as I said, this will be a bit of a longer ternary expression but still, should be okay.

54
00:03:23,530 --> 00:03:29,470
So let's add this condition here and then another question mark for the case that this condition is

55
00:03:29,470 --> 00:03:30,180
met

56
00:03:30,370 --> 00:03:31,870
and that would be result

57
00:03:31,870 --> 00:03:35,220
player wins and then a colon with the else case,

58
00:03:35,230 --> 00:03:41,410
so if that condition here is false and that's result computer wins. Now add a semicolon and we can

59
00:03:41,410 --> 00:03:46,060
now also comment out this if else if block. Now don't get me wrong, there's nothing wrong with that block,

60
00:03:46,090 --> 00:03:47,700
I just want to show you something.

61
00:03:47,830 --> 00:03:52,250
So let's autoformat this code, already makes it much more readable

62
00:03:52,360 --> 00:03:54,270
and now we have this code.

63
00:03:54,270 --> 00:04:00,400
Now I wouldn't argue that this is a bit more readable but this is also still fine, shouldn't be too hard

64
00:04:00,400 --> 00:04:02,520
to understand what's going on here.

65
00:04:02,620 --> 00:04:04,600
Now where's the advantage?

66
00:04:04,600 --> 00:04:13,330
Well if you have a function, an arrow function, where you only have one expression in it, you can actually

67
00:04:13,920 --> 00:04:15,490
omit the curly braces,

68
00:04:15,670 --> 00:04:21,710
so you can get rid of that and also you then have to omit the return keyword.

69
00:04:22,070 --> 00:04:26,220
So you can write this entire function in the end like this here,

70
00:04:26,240 --> 00:04:26,450
right,

71
00:04:26,450 --> 00:04:31,340
it's automatically restructured in a new line but this continues here after the arrow, this belongs to

72
00:04:31,340 --> 00:04:31,850
the function.

73
00:04:31,850 --> 00:04:38,360
So this is as if it would be in one long line, gets even clearer if we quickly add another function which

74
00:04:38,360 --> 00:04:39,080
we don't need here,

75
00:04:39,080 --> 00:04:44,630
let's say an add function which also takes a and b as arguments,

76
00:04:44,630 --> 00:04:52,220
then you could write this as just a + b. The equivalent, add to, with the function keyword would be

77
00:04:52,220 --> 00:04:58,160
that you have to write a b and then in here, return a + b.

78
00:04:58,160 --> 00:05:04,010
Now, that's not that much longer but this here certainly is shorter and especially in places where you

79
00:05:04,010 --> 00:05:07,880
just need to pass an anonymous function to quickly do some calculation,

80
00:05:07,880 --> 00:05:11,890
this is way shorter than if you have to write this. Now as always,

81
00:05:11,930 --> 00:05:18,350
it's not like this being awfully wrong but saving some code and therefore saving some time writing code

82
00:05:18,580 --> 00:05:21,130
is never a bad idea in Javascript.

83
00:05:21,170 --> 00:05:27,440
So along with other advantages which we will fully understand later, the availability of extra syntactical

84
00:05:27,440 --> 00:05:32,610
sugar like this where we can shorten this function is definitely nice to have.

85
00:05:32,630 --> 00:05:35,090
Now there's more we can do with that arrow function.

86
00:05:35,150 --> 00:05:40,700
So for arrow functions, the general syntax is this one, you have your list of arguments of course you

87
00:05:40,700 --> 00:05:46,370
don't need to accept any but if you do, then you write it like this, then this arrow and then your function

88
00:05:46,370 --> 00:05:47,570
body.

89
00:05:47,720 --> 00:05:54,530
Now in cases where you have no arguments, you will write this like this, you have to have your empty pair of

90
00:05:54,530 --> 00:05:55,470
parentheses here,

91
00:05:55,520 --> 00:05:57,980
you must not omit this,

92
00:05:58,010 --> 00:05:59,570
so this is required.

93
00:05:59,600 --> 00:06:02,660
This is how you would write this function if it gets no arguments.

94
00:06:02,690 --> 00:06:08,840
Now a nice other feature which I haven't shown you yet is if you get exactly one argument, not two,

95
00:06:08,900 --> 00:06:11,930
not none but one, then you can write it like this,

96
00:06:11,930 --> 00:06:16,850
so then you can omit parentheses, again saving some extra code that needs to be written,

97
00:06:16,850 --> 00:06:19,010
so parentheses can be omitted in this case.

98
00:06:19,040 --> 00:06:21,860
You also can add them but you also can omit them.

99
00:06:21,860 --> 00:06:26,540
Now if you have exactly one expression in the function body, that's what I just showed you, then you can

100
00:06:26,540 --> 00:06:28,760
write it like this, you can omit the

101
00:06:28,760 --> 00:06:35,080
curly braces, you don't have to but you can. If you omit them though, you also must remove any return keyword

102
00:06:35,140 --> 00:06:37,580
or any return statement you had in there

103
00:06:37,580 --> 00:06:40,880
and the result of this calculation will then always be returned.

104
00:06:40,880 --> 00:06:45,680
So even if you have an expression in there where you're not interested in the return value, it still

105
00:06:45,680 --> 00:06:46,730
will be returned.

106
00:06:46,730 --> 00:06:48,450
That might not be a problem,

107
00:06:48,530 --> 00:06:49,900
it's just something to be aware of,

108
00:06:49,940 --> 00:06:55,600
there always is an invisible return keyword in front of that part after the arrow,

109
00:06:55,670 --> 00:07:00,890
so in front of your function body and also keep in mind, this only is allowed if you have exactly one

110
00:07:00,920 --> 00:07:02,370
expression on the right side,

111
00:07:02,390 --> 00:07:07,220
so one expression that yields some kind of value. If you have an if statement in there,

112
00:07:07,250 --> 00:07:12,250
so anything which wouldn't work after a normal equal sign, that won't work here as well.

113
00:07:12,260 --> 00:07:17,900
So if you have more than one expression in the function body, you have to add curly braces and of course,

114
00:07:17,900 --> 00:07:22,010
you would write this over multiple lines, I'm just running out of space on the slide so you would write

115
00:07:22,010 --> 00:07:25,600
your code as normal in the other functions as well. So the

116
00:07:25,610 --> 00:07:30,680
curly braces and the return statement if you need one is required, it's not implicitly returned and you

117
00:07:30,680 --> 00:07:36,800
can't omit the curly braces. So that are arrow functions, again they also have one other advantage which

118
00:07:36,800 --> 00:07:37,570
we'll see later

119
00:07:37,760 --> 00:07:42,650
but even without that advantage, it's quite nice to have them because of all that potential for saving

120
00:07:42,650 --> 00:07:49,250
some code and saving one character here or there might not sound like a big deal but overall, it reduces

121
00:07:49,250 --> 00:07:54,170
the time you need to write code, giving you more time to think about the real problems you want to solve

122
00:07:54,170 --> 00:07:55,050
with your code

123
00:07:55,310 --> 00:07:59,920
and it also leads to shorter code which often is easier to skip through,

124
00:07:59,960 --> 00:08:01,130
easier to read,

125
00:08:01,130 --> 00:08:02,690
not always but often.

126
00:08:02,690 --> 00:08:07,600
So therefore, I will actually heavily use arrow functions here but you don't have to do that,

127
00:08:07,760 --> 00:08:10,010
it's again up to you which syntax you prefer,

128
00:08:10,010 --> 00:08:15,290
I'm personally a fan of arrow functions here and here therefore, I will convert all these functions to

129
00:08:15,290 --> 00:08:16,310
arrow functions,

130
00:08:16,310 --> 00:08:21,110
so by removing the function keyword and then adding the arrow between the parameter list and the function

131
00:08:21,110 --> 00:08:26,480
body. As you learned, here if you take no arguments, if you have no parameters, you need that empty pair

132
00:08:26,630 --> 00:08:33,810
of parentheses. So with that, let's also remove it here and add an arrow here in the anonymous function

133
00:08:33,810 --> 00:08:36,390
in the event listener, autoformat everything

134
00:08:36,390 --> 00:08:38,050
and yes, that's looking good,

135
00:08:38,060 --> 00:08:39,180
arrow functions everywhere.