Hey, everybody, welcome back.
In this video, we're going to talk about functions and as I've been saying during this whole section,
if you learn this, it's going to be very easy for you to apply this in any other programming.
Language functions are not exclusive to JavaScript.
So what are functions?
Functions are blocks of code designed to perform a specific task, and they can help us organize the
code, avoid repetition and reduce the complexity of the code as we are going to see later.
Let's start with a very basic example.
Let's create a function to some two numbers.
So let's go to Visual Studio Code to get started.
We use the function key word.
This is telling JavaScript that we are starting a function.
Now we choose a name for our function.
It can be something like some numbers.
This name has to follow the same rules.
As for the variable name rules, if you want to use Comox for the functions you can, it's just my preference
to leave case for the variables and lowercase with underscore separating words for functions.
You can just do what you think it's better.
So this is the name of the function and now we need to open and close parentheses.
So inside here we are going to place the arguments of the function.
We're going to talk about this in a minute.
This first example has no arguments, but even so, we still need to open and close parentheses and
leave this empty.
Now we are going to open and close curly braces and inside here will be the block of code that will
be executed by this function.
So in this case, I'm going to create a variable called num one.
Let's assign any number like five.
Second variable numb to.
Then we assign to now I'm going to create a new variable called some and some is going to be number
one plus number two, then I can just cancel that log.
Some.
If we save this and refresh the page.
We can see that nothing happened, actually, when we create the function.
We are not executing it, we are just declaring it the way we are going to execute this function is
by invoking it.
So to invoke the function, we just call it by name.
So its name is some numbers.
We open and close parentheses.
This is where we are going to place the argument.
This function has no arguments, but we still need to use parentheses, then semicolon and now if we
do this.
Refresh the page now we can see the result in the console, so now that we have created this, every
time we want to use this function, we can just call it.
We don't have to repeat that code every time.
So by doing this, let's go to the console.
And now it's been executed four times.
All right.
But this example seems a bit useless because why would we want to some five and two every time?
Ideally, we would want a dynamic function that we can change the numbers.
This is where arguments are going to become useful.
So with arguments, we will be able to change the numbers every time.
So let's create another function.
This time.
I'm going to call it some.
ARGs, just so I know that this is the function that we have arguments.
Now, this is going to be similar, but the difference is that now, instead of creating the variables
inside the function, we are just going to declare them as argument.
So no one.
And two and now we're going to pick it up from here.
So doing the some.
Now, one plus two, and then we are going to do the same thing, so not long.
So if we are not assigning any value to these variables or argument, when are we going to do this?
Well, when we execute the function.
So when we call it I'm going to call some args now, since our function has two arguments, every time
we call it, we need to declare this argument so I can sum ten and twenty five and now I have a dynamic
function.
Any time I want to sum to numbers, I don't have to repeat all this block of code.
I just invoke the function and tell which numbers I want to sum.
So I'm going to execute it three times with different numbers.
So now I'm going to sum a thousand with three seventy five down here.
I'm going to sum minus two with forty seven.
And if we do this and refresh the page, we can see that now we have different values every time.
So this is becoming a bit more useful now.
That's just something that's bothering me a little bit because sending these values to the console has
no practical purpose.
We know that we only do this to test things, but why would we create a function that sense values to
the console?
This is where the return statement is going to make things better.
So instead of doing something very specific, like sending it to the console or sending it to an HTML
element, all we're going to do is returning the value.
So let's go back to Visual Studio Code and instead of doing console that log.
We are just going to return.
The sun, so now we can do anything we want with it, if we want, we can send it to the console like
we did before so we can do console log.
And then we're going to call this function and this function is just going to return the sum.
So let's say I'm using ten and twenty five, the sum is going to be thirty five.
So what this function is going to do is just return thirty five and replace it here.
So when we do the console log, let's try it out.
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
do other things with it, like we can create a variable called average and then we can sum these two
numbers and then divide it by two.
And then we will have the average of these numbers.
Now.
We can send the average to the consul.
And now we can see that this is working pretty well.
Now let's go a bit further.
I've included a small challenge for you can use some minus twenty seven point fifty five using our some
args function and show the result in the element below.
This is pretty simple, right?
Because now our function is just returning the values.
So let's copy this idea.
If you want, you can pause the video and try to do it by yourself, then you come back here.
So to do this, I don't have to create an extra variable.
I can just do document.
Not yet element by BIID.
Now, this is the idea of the element then I can do that inner HTML and now I can just execute the function.
And all it's going to do is return the value and put it right here.
So the sum that I asked was minus twenty seven.
And 55.
So if we do this.
Go back there, refresh the page.
We are sending this result to this age HTML element, if you think this is too basic, don't worry,
we're going to have opportunities to do more complex stuff for now.
Let's do it like this step by step.
There are still some important things that I want to talk about first.
Then we can start increasing the complexity in the next few videos.
We're going to learn to other data types that are very important, which are arrays and objects.
So I'll see you in the next video.