1
00:00:02,170 --> 00:00:06,870
So now that we know that functions are objects and that

2
00:00:06,880 --> 00:00:12,730
we can also store functions in objects which essentially stores the object in an object I guess but an

3
00:00:12,730 --> 00:00:15,190
object which can be executed as a function,

4
00:00:15,190 --> 00:00:18,740
now that we know that, let's dive into a different way of creating functions.

5
00:00:19,030 --> 00:00:26,050
This code here, where I stored a function in an object is a bit strange because effectively here, we're creating

6
00:00:26,050 --> 00:00:30,400
that function on the right side of an assignment operator,

7
00:00:30,460 --> 00:00:37,010
the colon here is doing nothing else than assigning this or this value to this or this key,

8
00:00:37,090 --> 00:00:37,300
right?

9
00:00:37,300 --> 00:00:45,870
So it's a bit like if we would say well we store this function let's say in a constant named start or

10
00:00:45,870 --> 00:00:50,230
start game or whatever you want to name it, doesn't have to be the same name as here, it is like if I

11
00:00:50,230 --> 00:00:51,610
would do that.

12
00:00:51,670 --> 00:00:59,240
Now if I do that and I reload, we'll get an error, start game is not defined and this is coming from line

13
00:00:59,300 --> 00:01:00,560
18.

14
00:01:00,560 --> 00:01:05,180
So now this line here at the bottom complains that it can't find the start game function anymore, even

15
00:01:05,180 --> 00:01:06,190
though it exists.

16
00:01:06,290 --> 00:01:09,410
Now it's interesting to note that we didn't get any other error though,

17
00:01:09,410 --> 00:01:14,180
so Javascript does not complain that we use this on the right side of an equal sign.

18
00:01:14,210 --> 00:01:20,950
Now that's not something you should take for granted because for example, if we try to use an if statement

19
00:01:20,950 --> 00:01:23,790
on the right side, then Javascript will complain,

20
00:01:23,800 --> 00:01:26,390
even the IDE already complains that this is not allowed.

21
00:01:26,920 --> 00:01:31,110
So it's not something we should take for granted that we can take a function on the right side of the equal

22
00:01:31,150 --> 00:01:31,690
sign,

23
00:01:31,720 --> 00:01:35,350
it's something special indeed, it's something which we can do in Javascript.

24
00:01:35,350 --> 00:01:40,490
Now we store this function object, which it in the end is, in this start constant,

25
00:01:40,600 --> 00:01:43,990
the implication of that however is a very important one,

26
00:01:44,020 --> 00:01:50,290
previously we're not doing that. Javascript went through our file and registered all functions, no matter where

27
00:01:50,290 --> 00:01:55,780
we placed them, even if we placed them below the place where we use them and was aware of them, it stored

28
00:01:55,810 --> 00:02:00,520
these objects in some place in the global scope in the end,

29
00:02:00,520 --> 00:02:01,270
right,

30
00:02:01,270 --> 00:02:03,520
so we could call start game here.

31
00:02:03,520 --> 00:02:09,250
Now when we store it in this variable here, the implication is that this function is still created but

32
00:02:09,250 --> 00:02:13,240
it's not stored under this name here in the global scope anymore,

33
00:02:13,240 --> 00:02:18,900
instead this is just some kind of internal name which is attached to the function but which is not available

34
00:02:18,910 --> 00:02:24,310
in the global scope but instead, it's now stored in this constant.

35
00:02:24,310 --> 00:02:29,480
So if we would want to call this function here now, we can also call it like this,

36
00:02:29,680 --> 00:02:31,810
we have to refer to start down there,

37
00:02:31,810 --> 00:02:35,640
so to this start constant or whatever you name this constant.

38
00:02:35,680 --> 00:02:39,490
So if you named that start game which you can do, you can use the same name as here,

39
00:02:39,490 --> 00:02:45,080
this will not clash because as I just explained, this will not be stored in a global scope anymore

40
00:02:45,100 --> 00:02:46,680
when this is on the right side,

41
00:02:46,780 --> 00:02:50,700
so you can you start game, well then obviously you can keep start game down there too

42
00:02:50,710 --> 00:02:56,020
but if you use a different name which obviously is better for explaining this here, then you see you

43
00:02:56,020 --> 00:03:01,870
have to use that name down there and if you do so and you save that and you reload, it will work again.

44
00:03:02,590 --> 00:03:06,770
So you can store functions in variables or constants,

45
00:03:06,850 --> 00:03:13,360
what are you doing here in the end is you're using this function as an expression instead of as a declaration.

46
00:03:13,360 --> 00:03:19,050
So here, we're using this function as a declaration, as a statement, here since it's on the right side

47
00:03:19,060 --> 00:03:19,870
of the equal sign,

48
00:03:19,900 --> 00:03:21,670
we just use it as an expression.

49
00:03:21,670 --> 00:03:27,040
Remember, expressions were essentially the thing that yielded you values, so something you could store

50
00:03:27,060 --> 00:03:27,960
somewhere else,

51
00:03:27,970 --> 00:03:29,890
I mentioned that earlier as well.

52
00:03:29,890 --> 00:03:35,320
So now we're creating a function in this expression mode and therefore it generates a function object

53
00:03:35,410 --> 00:03:36,770
just as it did before

54
00:03:36,850 --> 00:03:41,800
but the difference is that Javascript will not go ahead and take that object and store it in the global

55
00:03:41,800 --> 00:03:48,520
scope for us in the end under that name but that instead, we just store it in this variable, that variable

56
00:03:48,520 --> 00:03:53,350
or that constant here is then stored in a global scope but we can therefore now only reference this

57
00:03:53,350 --> 00:03:56,430
function by using that variable or constant name,

58
00:03:56,440 --> 00:04:01,630
this is something we can do. And now we can also omit this name here if you want to because we don't

59
00:04:01,630 --> 00:04:02,970
really need it here, right?

60
00:04:02,980 --> 00:04:08,100
We can't reference that function by that name anyways and hence, we can also omit it.

61
00:04:08,110 --> 00:04:13,600
This now is a so-called anonymous function and typically you then place the parentheses right after

62
00:04:13,600 --> 00:04:15,650
the function keyword without a whitespace,

63
00:04:15,670 --> 00:04:17,020
technically it doesn't make a difference,

64
00:04:17,080 --> 00:04:22,420
it's just some code style and important, when using this function expression with or without a name,

65
00:04:22,450 --> 00:04:24,910
you also typically add a semicolon after it.

66
00:04:24,910 --> 00:04:28,290
You could do that after a function declaration as we used it before as well

67
00:04:28,300 --> 00:04:31,690
but there you typically avoid it because it's like a statement

68
00:04:31,780 --> 00:04:35,910
but here if it's on the right side, the convention is to add this semicolon.

69
00:04:35,920 --> 00:04:39,900
So now if we do that, this will still work as before as you can tell

70
00:04:40,090 --> 00:04:42,850
but now we also create this so-called anonymous function.

71
00:04:42,850 --> 00:04:47,770
Now the concept of having an anonymous function is detached from the concept of storing a function in a

72
00:04:47,770 --> 00:04:48,590
constant.

73
00:04:48,730 --> 00:04:53,770
We can use anonymous functions in different places as well and I'll show you such a place in just a

74
00:04:53,770 --> 00:04:54,570
second,

75
00:04:54,580 --> 00:04:56,440
I just wanted to introduce it here as well

76
00:04:56,530 --> 00:05:01,570
but let's actually take a step back from that and ignore the anonymous function thing right now and

77
00:05:01,570 --> 00:05:07,150
just have a look at this function expression versus function declaration, function statement thing

78
00:05:07,570 --> 00:05:10,450
why would you use that instead of the other syntax?