Original subtitles

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.