1
00:00:09,300 --> 00:00:10,980
Hey, everybody, welcome back.

2
00:00:11,190 --> 00:00:17,900
In this video, we're going to talk about functions and as I've been saying during this whole section,

3
00:00:17,940 --> 00:00:24,300
if you learn this, it's going to be very easy for you to apply this in any other programming.

4
00:00:24,300 --> 00:00:28,330
Language functions are not exclusive to JavaScript.

5
00:00:28,530 --> 00:00:29,910
So what are functions?

6
00:00:30,270 --> 00:00:37,710
Functions are blocks of code designed to perform a specific task, and they can help us organize the

7
00:00:37,710 --> 00:00:45,300
code, avoid repetition and reduce the complexity of the code as we are going to see later.

8
00:00:45,690 --> 00:00:48,420
Let's start with a very basic example.

9
00:00:48,430 --> 00:00:51,110
Let's create a function to some two numbers.

10
00:00:51,120 --> 00:00:54,760
So let's go to Visual Studio Code to get started.

11
00:00:54,780 --> 00:00:56,850
We use the function key word.

12
00:00:57,090 --> 00:01:01,120
This is telling JavaScript that we are starting a function.

13
00:01:01,440 --> 00:01:04,260
Now we choose a name for our function.

14
00:01:04,410 --> 00:01:07,760
It can be something like some numbers.

15
00:01:08,100 --> 00:01:11,400
This name has to follow the same rules.

16
00:01:11,400 --> 00:01:20,580
As for the variable name rules, if you want to use Comox for the functions you can, it's just my preference

17
00:01:20,880 --> 00:01:29,360
to leave case for the variables and lowercase with underscore separating words for functions.

18
00:01:29,700 --> 00:01:32,310
You can just do what you think it's better.

19
00:01:33,150 --> 00:01:38,370
So this is the name of the function and now we need to open and close parentheses.

20
00:01:38,550 --> 00:01:43,320
So inside here we are going to place the arguments of the function.

21
00:01:43,830 --> 00:01:45,820
We're going to talk about this in a minute.

22
00:01:46,110 --> 00:01:53,070
This first example has no arguments, but even so, we still need to open and close parentheses and

23
00:01:53,070 --> 00:01:54,440
leave this empty.

24
00:01:54,810 --> 00:02:02,460
Now we are going to open and close curly braces and inside here will be the block of code that will

25
00:02:02,460 --> 00:02:04,690
be executed by this function.

26
00:02:05,010 --> 00:02:09,000
So in this case, I'm going to create a variable called num one.

27
00:02:10,500 --> 00:02:13,590
Let's assign any number like five.

28
00:02:14,960 --> 00:02:17,630
Second variable numb to.

29
00:02:19,400 --> 00:02:28,010
Then we assign to now I'm going to create a new variable called some and some is going to be number

30
00:02:28,130 --> 00:02:33,890
one plus number two, then I can just cancel that log.

31
00:02:35,040 --> 00:02:35,580
Some.

32
00:02:37,050 --> 00:02:40,260
If we save this and refresh the page.

33
00:02:41,430 --> 00:02:46,180
We can see that nothing happened, actually, when we create the function.

34
00:02:46,380 --> 00:02:54,030
We are not executing it, we are just declaring it the way we are going to execute this function is

35
00:02:54,030 --> 00:02:55,560
by invoking it.

36
00:02:56,040 --> 00:02:59,000
So to invoke the function, we just call it by name.

37
00:02:59,250 --> 00:03:01,350
So its name is some numbers.

38
00:03:01,590 --> 00:03:03,570
We open and close parentheses.

39
00:03:03,570 --> 00:03:06,360
This is where we are going to place the argument.

40
00:03:06,570 --> 00:03:15,060
This function has no arguments, but we still need to use parentheses, then semicolon and now if we

41
00:03:15,060 --> 00:03:15,810
do this.

42
00:03:16,820 --> 00:03:23,690
Refresh the page now we can see the result in the console, so now that we have created this, every

43
00:03:23,690 --> 00:03:27,320
time we want to use this function, we can just call it.

44
00:03:27,530 --> 00:03:30,360
We don't have to repeat that code every time.

45
00:03:30,560 --> 00:03:33,230
So by doing this, let's go to the console.

46
00:03:33,590 --> 00:03:36,680
And now it's been executed four times.

47
00:03:36,860 --> 00:03:37,280
All right.

48
00:03:37,280 --> 00:03:45,010
But this example seems a bit useless because why would we want to some five and two every time?

49
00:03:45,230 --> 00:03:50,510
Ideally, we would want a dynamic function that we can change the numbers.

50
00:03:50,720 --> 00:03:54,130
This is where arguments are going to become useful.

51
00:03:54,140 --> 00:03:58,490
So with arguments, we will be able to change the numbers every time.

52
00:03:58,700 --> 00:04:01,040
So let's create another function.

53
00:04:02,430 --> 00:04:03,210
This time.

54
00:04:05,270 --> 00:04:07,130
I'm going to call it some.

55
00:04:08,360 --> 00:04:14,000
ARGs, just so I know that this is the function that we have arguments.

56
00:04:15,540 --> 00:04:21,360
Now, this is going to be similar, but the difference is that now, instead of creating the variables

57
00:04:21,600 --> 00:04:26,710
inside the function, we are just going to declare them as argument.

58
00:04:26,760 --> 00:04:27,870
So no one.

59
00:04:29,120 --> 00:04:32,990
And two and now we're going to pick it up from here.

60
00:04:33,710 --> 00:04:35,150
So doing the some.

61
00:04:37,610 --> 00:04:42,950
Now, one plus two, and then we are going to do the same thing, so not long.

62
00:04:43,640 --> 00:04:51,260
So if we are not assigning any value to these variables or argument, when are we going to do this?

63
00:04:51,260 --> 00:04:53,950
Well, when we execute the function.

64
00:04:54,830 --> 00:05:02,600
So when we call it I'm going to call some args now, since our function has two arguments, every time

65
00:05:02,600 --> 00:05:11,180
we call it, we need to declare this argument so I can sum ten and twenty five and now I have a dynamic

66
00:05:11,180 --> 00:05:11,990
function.

67
00:05:11,990 --> 00:05:17,210
Any time I want to sum to numbers, I don't have to repeat all this block of code.

68
00:05:17,390 --> 00:05:22,820
I just invoke the function and tell which numbers I want to sum.

69
00:05:23,060 --> 00:05:27,350
So I'm going to execute it three times with different numbers.

70
00:05:27,710 --> 00:05:33,320
So now I'm going to sum a thousand with three seventy five down here.

71
00:05:33,320 --> 00:05:37,580
I'm going to sum minus two with forty seven.

72
00:05:38,510 --> 00:05:45,800
And if we do this and refresh the page, we can see that now we have different values every time.

73
00:05:45,830 --> 00:05:48,830
So this is becoming a bit more useful now.

74
00:05:48,830 --> 00:05:55,100
That's just something that's bothering me a little bit because sending these values to the console has

75
00:05:55,100 --> 00:05:56,910
no practical purpose.

76
00:05:57,380 --> 00:06:05,450
We know that we only do this to test things, but why would we create a function that sense values to

77
00:06:05,450 --> 00:06:06,350
the console?

78
00:06:06,710 --> 00:06:11,930
This is where the return statement is going to make things better.

79
00:06:12,050 --> 00:06:20,270
So instead of doing something very specific, like sending it to the console or sending it to an HTML

80
00:06:20,270 --> 00:06:24,200
element, all we're going to do is returning the value.

81
00:06:24,830 --> 00:06:30,260
So let's go back to Visual Studio Code and instead of doing console that log.

82
00:06:31,180 --> 00:06:33,160
We are just going to return.

83
00:06:34,370 --> 00:06:42,170
The sun, so now we can do anything we want with it, if we want, we can send it to the console like

84
00:06:42,170 --> 00:06:45,290
we did before so we can do console log.

85
00:06:46,190 --> 00:06:53,280
And then we're going to call this function and this function is just going to return the sum.

86
00:06:53,510 --> 00:06:59,600
So let's say I'm using ten and twenty five, the sum is going to be thirty five.

87
00:06:59,720 --> 00:07:05,640
So what this function is going to do is just return thirty five and replace it here.

88
00:07:05,840 --> 00:07:09,440
So when we do the console log, let's try it out.

89
00:07:12,270 --> 00:07:18,600
We can see that this is working, but now we don't have to do it if we don't want it, we can actually

90
00:07:18,600 --> 00:07:27,540
do other things with it, like we can create a variable called average and then we can sum these two

91
00:07:27,540 --> 00:07:30,360
numbers and then divide it by two.

92
00:07:30,360 --> 00:07:34,170
And then we will have the average of these numbers.

93
00:07:34,410 --> 00:07:34,950
Now.

94
00:07:37,590 --> 00:07:39,930
We can send the average to the consul.

95
00:07:48,710 --> 00:07:51,410
And now we can see that this is working pretty well.

96
00:07:52,160 --> 00:07:54,060
Now let's go a bit further.

97
00:07:54,110 --> 00:08:01,700
I've included a small challenge for you can use some minus twenty seven point fifty five using our some

98
00:08:01,700 --> 00:08:06,030
args function and show the result in the element below.

99
00:08:06,380 --> 00:08:08,090
This is pretty simple, right?

100
00:08:08,090 --> 00:08:12,050
Because now our function is just returning the values.

101
00:08:12,170 --> 00:08:13,970
So let's copy this idea.

102
00:08:14,270 --> 00:08:18,820
If you want, you can pause the video and try to do it by yourself, then you come back here.

103
00:08:19,100 --> 00:08:23,480
So to do this, I don't have to create an extra variable.

104
00:08:23,960 --> 00:08:26,450
I can just do document.

105
00:08:28,910 --> 00:08:31,820
Not yet element by BIID.

106
00:08:33,100 --> 00:08:44,110
Now, this is the idea of the element then I can do that inner HTML and now I can just execute the function.

107
00:08:45,650 --> 00:08:49,970
And all it's going to do is return the value and put it right here.

108
00:08:51,490 --> 00:08:56,230
So the sum that I asked was minus twenty seven.

109
00:08:57,720 --> 00:08:59,040
And 55.

110
00:08:59,950 --> 00:09:01,510
So if we do this.

111
00:09:03,860 --> 00:09:06,230
Go back there, refresh the page.

112
00:09:07,460 --> 00:09:15,440
We are sending this result to this age HTML element, if you think this is too basic, don't worry,

113
00:09:15,440 --> 00:09:19,800
we're going to have opportunities to do more complex stuff for now.

114
00:09:19,940 --> 00:09:22,330
Let's do it like this step by step.

115
00:09:22,580 --> 00:09:26,510
There are still some important things that I want to talk about first.

116
00:09:26,750 --> 00:09:31,310
Then we can start increasing the complexity in the next few videos.

117
00:09:31,670 --> 00:09:38,020
We're going to learn to other data types that are very important, which are arrays and objects.

118
00:09:38,300 --> 00:09:39,950
So I'll see you in the next video.