The fundamental building block
of real world JavaScript applications are functions.
They are one of the most essential concepts in the language
and so let's study functions over the next couple of videos.
So what actually are functions?
Well in the most simple form a function
is simply a piece of code that we can reuse
over and over again in our code.
So it's a little bit like a variable
but for whole chunks of code.
So remember a variable holds value
but a function can hold one or more complete lines of code.
So let's not declare our very first function
so we start with the function keyword
and then we define a function name
and let's now just create a simple logger
which is a function that will simply log
something to the console.
So I will call this one logger and then we need parenthesis
and we will see why in a next example
and then we use the curly braces
to create the so-called function buddy.
So all the code that is within this code block here
so within this block of curly braces
is called the function buddy
and it's this code that will
be executed when we run this function.
So let's say we needed to execute a log many times
somewhere in our program.
So let's simply console dot log my name is Jonas
and so somewhere in our program
we needed to reuse this line of code here multiple times
and so that's why we put it in a function, okay?
So we created the function and now we can use it
and we can use it as many times as we want.
So to use the function, we simply write the function name
followed by a parenthesis and that's actually it
and this process here of basically using the function
is called invoking the function, running the function
or calling the function.
So let me actually write these terms here
so calling running or invoking the function
and you will see me use these three terms here
interchangeably, okay?
So they basically mean the same thing you can think of them
as like executing or using the function
that we defined previously, okay?
And as I said, we can now use or call
or run this function as many times as we want
and each time that we call the function like this
then the code that is in the function
will get executed, all right?
So in this case, what should we expect here?
Let's see and indeed we get this
my name is Jonas log three times
because we call the function three times
and so this line of code here was executed three times.
Great, so we just wrote our very first function
and it's already working just fine
and I hope that this logic
of reusing code makes sense to you
but let's now take it to the next level
and really use some more functionalities of functions
because they can do a lot more
than simply reusing a line of code like we did here.
So usually when we write functions
we also pass data into a function
and additionally, a function can also return data as well
which means to give us data back
that we can then use for something else in the program.
So a function cannot only reuse a piece of code
like we did here
but it can also receive data and return data back
and so I like to think of functions as machines.
So I think that's a great analogy
so for example, let's imagine a food processor,
so we put foot into the processor
then the processor does something to our food
which is the function body basically
and then in the end
the food processor returns to processed food
for example, a juice
and so that's exactly what we can do with functions as well
and actually let's implement exactly this example.
So, again, we need to use the function keyword
and then we choose a function name
and just like with variable names
we should choose descriptive function names
so that we know exactly what they do.
So let's call this one a fruit processor
but in this function
we also specify something called parameters
and parameters are like variables
that are specific only to this function
and they will get defined once we call the function.
So let's give this fruit processor function
two parameters, apples
and then a second one separated by a comma called oranges
and again these two will get defined
once the function is called
and they represent the input data of this function, okay?
And this will make even more sense
when we then actually call his function
and let's start by logging these to the console.
So apples and also oranges
and so what I'm doing here
is to basically use these parameters here.
So apples and oranges just as if they were normal variables
here inside this function
and now let's actually do something more interesting
with these parameters
and so we want to kind of simulate that is fruit processor
produces a juice out of the apples and oranges
that we give it
and so let's just create a string, which says that.
So we wanna create a variable called juice
and then a template literal
and I'm gonna say juice with
and then I'm using actually the apples parameter here.
So apples and then apples
because this apples parameter will be a number
once we call this.
For example, if we set apples to three
then the string will be juice with three apples
and again this will really make sense
once we call this function
so oranges and oranges again, okay?
So here we build a string using the input data
that we get into the function
and now comes the really cool part
because now we can use the return keyword
and with this, we can return any value from the function
and so let's actually return the juice that we just produced
and so this value that we then return
can be used anywhere later in our code.
So basically this Jews will become the result
of executing this function and let's actually do that.
So let's call or run or invoke this function now
so fruit processor
and now we're gonna specify the actual values
for the parameters, apples and oranges
and so let's say for example, five apples
and zero oranges, okay?
And so these now will be the inputs
of the fruit processor function.
So you can think of these parameters here
like empty spaces that we still need to fill out
when we are writing the function
and when we call the function, then later in the code
here at this point, we then filled these blank spaces
by passing in the real specific values
which will then get assigned to the parameters
and this example, apples will become five
and oranges, which is the second parameter here, right?
Will become zero, and these actual values here
of the parameters are called the arguments.
Alright, so let's now basically run the script
and so now we get five and zero.
so this is coming from line 26, which is this line.
So it's this logging to the console of the apples
which is five and oranges which is zero
and apples are five because that's the value
that we specified here, okay?
So we specified apples as five
and so in this function the apple parameter
or you can think of this parameter as a variable
is now five and oranges is of course zero
but now you might wonder what about the juice
that just produced here?
Where is it?
Well, the juice was returned from this function.
So basically that means that the result
of running this function here
is the juice that we just returned.
Basically, once this function has been executed
this code here is then replaced
by the result of the function
and in this case that's gonna be the juice string
that we produced.
So if we want to use that value that was returned
we need to store it in a variable
so let's do that.
So let's call it apple juice
and then let's log that to the console, reload it here
and now we get juice with five apples and zero oranges.
So let's recap again, what happened here?
So we called the fruit processor function here
with two arguments, five and zero
and these arguments are the specific.
So the actual values of the functions parameters
which are apples and oranges
and so when the function is running now,
apples in here will be five and oranges will be zero.
Then we use these values to build this juice string here
and then we return that value from the function
and what that means is that basically
the result of calling this function here
will be the juice value that was just returned, okay?
And then we need to save that value somewhere
we need to capture it
and we do that by basically saving it
into this apple juice variable
and then we can simply lock that value to the console.
Of course we could have also directly logged it
to the console.
So basically without capturing the value anywhere
and simply log in it.
So let me just copy this one here
and so if I run this now.
we should see the same string twice
and yes, indeed.
Now the fruit processor function was executed twice
once here and once here
the only difference is that in this case here
we did not capture the value into any variable.
We simply log the result of running this function
to the console directly, okay?
So just to show you the difference.
Okay, and now thanks to the power of the function
we can reuse the function with different input values
and then get a different output.
So let's try that and let's create apple and orange juice
so apple orange juice
and so this time we can call fruit processor
let's say with two apples and four oranges.
So once again, we are defining specific values here
which are the arguments
which will get passed into the function
here as these parameters.
So essentially what we did here
was to create a very generic function
that works for any number of apples and oranges.
So it's really like we're leaving apples and oranges
as the blank spaces
and then when we call the function
we fill in these blank spaces using our arguments.
So two and four in this example
and now we can also then lock the results.
So apple orange juice
and actually we can get rid of this console dot log here
because we don't really need it.
All we want here is to produce this juice
and then return the juice from the function, okay?
And so now we get two juices, one with five apples
and zero oranges, which is this first one
and then finally the juice with two apples and four oranges
and so that's the second one that we just produced
and of course we could run this function
as many times as we want it
but we should call it at least once
because if we never called a function then the code
that's in the function will never be executed
and that makes sense, right?
So without executing the function it's kind of useless
because the code will never run
it will never be processed because that only happens
once we called a function like this or like this here also.
So as you see this function here has no parameters
and so here when we call the function
we do not specify any arguments, we could do that.
So let's just pass 23 but since there are no parameters,
it will not get used
and so specifying the argument here or not
will not have any effect.
You'll see that this function hear
also doesn't return anything
and that's not a problem at all,
not all functions need to return something
and not all functions need to accept parameters
like the fruit processor that we have down here.
So this is a very simple function here
and this is a more complete example
showing you everything that we can do with functions
and this kind of function is actually way more usual
than this simpler one here.
So function like this without parameters
and without a return we really only use
when there is a block of code
that we want to reuse over and over again.
Once more keep in mind
that this function does not return anything
all it does is to log something to the console
but that has nothing to do with returning a value.
This really only prints a message
here to the developer console
but it doesn't return a value.
So basically this here does not produce a value
because we don't return anything from the function
and that's why here we also don't save
the result of the function to any variable
because it doesn't produce any result
while technically it does produce undefined
but that's not really relevant here
and so of course we don't capture that undefined value.
Okay, great and that's basically
the fundamentals of functions
and I'm pretty sure that this was confusing for you
if this was your first contact with functions
and actually that's probably how it's supposed to be.
So what I want you to do is to review this lecture
very thoroughly and really understand
how all of this works together.
So how writing this generic function
with the parameters works together
with then calling a function with the specific values
and how the function then returns a value
and how in the end we then received that value here
and capture it into this variable.
So that's what I want you to think about
and to analyze, all right?
So as a conclusion to this lecture, we can say
that functions allow us to write more maintainable code
because with functions
we can create reusable chunks of code
instead of having to manually write
the same code over and over again.
So that's the most important thing
that you need to know about functions
and when you know that
you will know when you should actually use functions
and this is actually a very important principle
for writing clean code
that is used in programming all the time
and this principle is called don't repeat yourself or dry.
So we say that we should keep our code dry
which means that we should not repeat ourselves
and so functions are perfect for implementing dry code
because they are reusable code blocks
that together, make up all applications
and of course we will use functions
throughout the rest of the course
because as I said in the beginning
they are a fundamental building block
of JavaScript programs
and by the way, you can now understand
that console dot log here is actually also just a function
but a built in function
that we do not have to write ourselves
but you see that we just call it like our own functions.
So we call it using the parenthesis here
and then we pass in a value.
So apple, orange juice
and the result of calling the function is simply
this message then appearing in the developer console
and the same is true for the function
that we used to convert a string to a number.
So this is another built in function
that takes this 23 string in this case as a parameter.
So we pass this argument into the function
and this function will then be executed
and returned the string as a number
and then we can save that like we did before, okay?
So this is gonna work just the same
and of course we cannot see it
but we can still check it out by writing numb, okay?
But now, anyway I will leave you to really analyze
how all of this logic here works that we just wrote.
So do that now and only once you fully understand
how this example works move on to the next video.