1
00:00:02,080 --> 00:00:03,220
Now let's dive back

2
00:00:03,220 --> 00:00:06,210
into our app.js file here.

3
00:00:06,210 --> 00:00:07,043
And for this,

4
00:00:07,043 --> 00:00:11,630
I'll also switch back to app.js here in index.html.

5
00:00:12,500 --> 00:00:16,780
We did not learn a lot about values, variables, functions,

6
00:00:16,780 --> 00:00:21,390
parameters, return values, and all these important concepts,

7
00:00:21,390 --> 00:00:23,670
which you are encounter all the time

8
00:00:23,670 --> 00:00:25,423
in JavaScript development.

9
00:00:26,500 --> 00:00:28,860
To come to an end in this section

10
00:00:28,860 --> 00:00:32,549
and lay a solid foundation for the upcoming sections,

11
00:00:32,549 --> 00:00:34,880
where we are going to dive deeper,

12
00:00:34,880 --> 00:00:39,740
I wanna talk about another area where we can use functions.

13
00:00:39,740 --> 00:00:40,862
Remember objects?

14
00:00:40,862 --> 00:00:42,170
Of course you do,

15
00:00:42,170 --> 00:00:45,870
we used them in the exercise a few minutes ago.

16
00:00:45,870 --> 00:00:48,190
In objects, up to this point,

17
00:00:48,190 --> 00:00:50,910
we grouped together variables,

18
00:00:50,910 --> 00:00:52,680
if you want to call it like this.

19
00:00:52,680 --> 00:00:56,830
We have related values grouped together into an object,

20
00:00:56,830 --> 00:01:00,453
and we have labels to then identify these values.

21
00:01:01,550 --> 00:01:04,800
Now it is also not uncommon

22
00:01:04,800 --> 00:01:08,560
that you don't just want to have values like that

23
00:01:08,560 --> 00:01:10,040
in an object,

24
00:01:10,040 --> 00:01:13,210
but that you also wanna have functions

25
00:01:13,210 --> 00:01:14,910
inside of an object.

26
00:01:14,910 --> 00:01:18,840
So just as you can basically put variables into an object,

27
00:01:18,840 --> 00:01:21,540
you can also put functions into that object.

28
00:01:21,540 --> 00:01:23,280
And that makes sense

29
00:01:23,280 --> 00:01:26,620
if a certain function contains code

30
00:01:26,620 --> 00:01:31,620
that works together with the values in that object

31
00:01:31,710 --> 00:01:36,710
or that logically belongs to this kind of object.

32
00:01:37,320 --> 00:01:39,170
And to give you an example,

33
00:01:39,170 --> 00:01:42,210
I'll add a brand new object down there

34
00:01:42,210 --> 00:01:44,230
and I will name it person

35
00:01:45,240 --> 00:01:48,930
and be created, as we learned it, with curly braces.

36
00:01:48,930 --> 00:01:53,570
And now we could add different label value pairs,

37
00:01:53,570 --> 00:01:58,000
for example, for storing a name of that person like Max,

38
00:01:58,000 --> 00:02:01,100
but I want to focus on adding a function here.

39
00:02:01,100 --> 00:02:04,520
And adding a function here works like this.

40
00:02:04,520 --> 00:02:07,270
We could add a greet function

41
00:02:07,270 --> 00:02:12,160
where this person then says hello to us like this.

42
00:02:13,210 --> 00:02:16,380
So basically as we define a function,

43
00:02:16,380 --> 00:02:19,150
we also add a name, parentheses,

44
00:02:19,150 --> 00:02:21,730
maybe with parameters if we need them,

45
00:02:21,730 --> 00:02:23,980
and then the curly braces,

46
00:02:23,980 --> 00:02:26,020
and we do the same here.

47
00:02:26,020 --> 00:02:27,100
The only difference is

48
00:02:27,100 --> 00:02:29,520
that we don't have the function keyword

49
00:02:29,520 --> 00:02:32,450
just as we don't have the let keyword

50
00:02:32,450 --> 00:02:35,060
in front of our properties.

51
00:02:35,060 --> 00:02:38,223
So it's basically the same, just for a function.

52
00:02:39,230 --> 00:02:41,480
We could accept parameters here,

53
00:02:41,480 --> 00:02:45,980
but we could also say that this is a very simple function,

54
00:02:45,980 --> 00:02:48,690
which then just says hello,

55
00:02:48,690 --> 00:02:51,523
by using the built-in alert command.

56
00:02:52,600 --> 00:02:56,590
That's how we could add such a function to an object.

57
00:02:56,590 --> 00:02:59,170
And if we add a function to an object,

58
00:02:59,170 --> 00:03:02,220
we typically call that a method.

59
00:03:02,220 --> 00:03:05,170
So a function in an object is called a method

60
00:03:05,170 --> 00:03:09,620
just as a variable in an object is called a property.

61
00:03:09,620 --> 00:03:12,360
So here we call this a property,

62
00:03:12,360 --> 00:03:14,723
we call this a method.

63
00:03:15,990 --> 00:03:19,090
But it's technically still is a function, of course.

64
00:03:19,090 --> 00:03:23,470
And here we now, again, also see an example for a function,

65
00:03:23,470 --> 00:03:27,120
or a method, that does not take any parameters

66
00:03:27,120 --> 00:03:29,970
and that does not return anything.

67
00:03:29,970 --> 00:03:31,590
Because for this function,

68
00:03:31,590 --> 00:03:34,000
and the kind of operation it's performing,

69
00:03:34,000 --> 00:03:35,970
we don't need to return anything.

70
00:03:35,970 --> 00:03:40,010
Just executing another function is all we need here.

71
00:03:40,010 --> 00:03:40,850
And in that case,

72
00:03:40,850 --> 00:03:43,970
it's perfectly fine to define a function like this

73
00:03:43,970 --> 00:03:47,250
without return value and without parameters,

74
00:03:47,250 --> 00:03:48,970
no matter if it's a method or not,

75
00:03:48,970 --> 00:03:52,100
you can write functions without parameters

76
00:03:52,100 --> 00:03:54,913
and/or without return values.

77
00:03:56,090 --> 00:03:57,360
But now the question is,

78
00:03:57,360 --> 00:04:01,123
how do we execute this function in this object?

79
00:04:01,970 --> 00:04:04,763
We don't execute it like this.

80
00:04:05,630 --> 00:04:07,460
That would be the function name,

81
00:04:07,460 --> 00:04:12,313
but just as you can't access the property like this,

82
00:04:13,360 --> 00:04:16,649
you also can't access a function just like this,

83
00:04:16,649 --> 00:04:18,173
that won't work.

84
00:04:19,050 --> 00:04:22,720
Instead we do access a function in an object,

85
00:04:22,720 --> 00:04:23,800
so a method,

86
00:04:23,800 --> 00:04:28,080
just as we access other values in an object,

87
00:04:28,080 --> 00:04:30,200
by using that dot notation.

88
00:04:30,200 --> 00:04:35,050
We can access the object name, person, and then a dot

89
00:04:35,050 --> 00:04:39,080
and then in here, we have this greet method.

90
00:04:39,080 --> 00:04:42,270
And we see the difference between properties

91
00:04:42,270 --> 00:04:47,060
and methods here in this suggestions pop-up.

92
00:04:47,060 --> 00:04:50,070
Properties have this blue box,

93
00:04:50,070 --> 00:04:52,920
methods have this purple box,

94
00:04:52,920 --> 00:04:55,840
which is shaped differently.

95
00:04:55,840 --> 00:04:58,410
But then we still execute it as we learned it,

96
00:04:58,410 --> 00:05:02,730
so by using its name and adding parenthesis thereafter.

97
00:05:02,730 --> 00:05:06,370
And if this function would need any parameters,

98
00:05:06,370 --> 00:05:09,480
we could still pass the parameter values here

99
00:05:09,480 --> 00:05:11,530
between these parentheses.

100
00:05:11,530 --> 00:05:13,253
But here we don't need that.

101
00:05:14,300 --> 00:05:18,653
And with this, if we saved that and I reload,

102
00:05:20,050 --> 00:05:24,810
I still get my old boxes and then I get this hello box,

103
00:05:24,810 --> 00:05:27,860
which is coming from inside my method.

104
00:05:27,860 --> 00:05:30,800
And that is something which we'll also need

105
00:05:31,860 --> 00:05:35,450
a little bit later in the course, but most importantly,

106
00:05:35,450 --> 00:05:38,360
something which we will use indirectly

107
00:05:38,360 --> 00:05:40,913
on certain built-in objects.

108
00:05:41,760 --> 00:05:45,223
And in the next lecture, I'll explain what I mean with that.