Original subtitles

To finish this part about functions,

let's review everything important that we learned so far.

In order to make sure that you really understand functions

before we move on to other topics.

And let's start by bringing back and rewriting the function

that we wrote before,

which is the years until retirement function.

So I think that was,

yeah it was here in the lecture about arrow functions.

So let's copy this one and paste it here.

And the first thing that we're gonna do

is to actually convert it

to a more normal function expression.

So how do we do that?

Well, in this case,

we simply get rid of the arrow here

and then write the function keyword here.

And so now this is just a regular function expression

like we learned before.

Next up we could export this functionality here

into another function.

So like a calcAge function that we've been using before.

So let's do that

because then we can do what we did in the last lecture,

which was to call one function inside of the other function.

So let's write another function expression here,

calcAge equals

a function and then the birth year again.

And what we return from this one is simply 2037

minus the birth year.

So we already did that before. Right.

Now you might find it confusing

that we have two different functions here

with the same parameter names.

So this one has birth year and this one has too,

but that's not a problem at all.

So this birth year in this function is not at all related

to this birth year in this function.

They are two completely different parameters.

So basically two different variables.

We could even have a variable outside

of any of the functions,

which could also be called birth year.

Okay.

And we could do that now,

but I don't want to confuse you even further. Okay.

But what matters here is that this parameter is really

like a local variable to each function.

Anyway,

let's now go ahead and delete this here and instead,

calculate the age based on the function that we just wrote.

And actually we just delete this part here.

And so now the age will come from the function calcAge.

And what we pass in here is the birth year.

So again, it's confusing now with these

same parameter names here,

but let's quickly call this function

just so I can quickly show you the data flow.

So years until retirement with birth year 1991

and first name of Jonas.

So 1991 will be the birth year here in this function.

Then as a first step,

this years until retirement function called calcAge

and it calls calcAge with the argument of 1991.

So this one here,

and so then birth year in this function also becomes 1991.

And so then here, the operation will be 2037 minus 1991.

And if you find it less confusing,

we could change this year to something else.

Let's just say year and it would work the exact same way.

Okay. So again,

these variable names in these two different functions,

they do not have anything to do with one another.

All right.

But let's actually put it back here

because it's a, it's good to keep this in mind.

Then down here,

let's actually go back to returning a number

and not the string, which for now I will just comment out.

So here we call this function and once more,

I'm not gonna store it into a variable.

So we will just log the result of this, to the console.

So this should be just like before, 19.

Okay.

But now I want to show you something

which is to call this function again,

let's say now with a Mike

and let's say Mike was born in 1970.

And so,

his years until retirement will be two.

So a negative number, which means that he already retired.

So let's quickly account for that.

So what we will do is to basically return this number,

if it is above zero,

and if it is below zero,

we are gonna return something else like a minus one

or something or some special number.

So instead of returning simply the retirement,

let's take a decision here based on the retirement value.

And so that's something that we learned in the last lecture.

So let's use an if else statement and say,

if the retirement is

greater than zero.

So if there are more than zero years left until retirement

then return this retirement value.

Okay.

So remember that in the, if block,

we can put any code that we want.

And so that includes the return statement.

And else, well, let's just return always minus one.

So, minus one is kind of a standard number in programming.

We could also like return,

like this.

So a number that shows us clearly that this has no meaning.

Let's just keep it at number one, minus number one.

Okay.

And I'm returning actually numbers here

and not a string as we had before,

because that's usually what we do,

especially when we actually receive a number as an input.

So here in this function, we get birth year

here as an input, and it's a number

and therefore it's a good practice to

then also return a number.

Okay, let's try this again.

Now, we'll even change it to something more drastic.

So 1950 and let's see what we get now.

Now,

so it's minus one now.

Great.

Now, one thing that I didn't mention yet is

that this return keyword here

will actually immediately exit the function.

So it will first return the value that we tell it to return.

So in this case, the retirement value,

and then after that, the function is done.

So it exits immediately.

And we also say that the function has returned.

So let me actually demonstrate that to you.

And what I will do is to take this string here.

Now we can get rid of the rest

and I will put that after the return.

So we will log to the console,

this string here that we just had.

And then here let's log simply

the first name has already retired,

and then we can put another emoji here,

like this party emoji that I like.

And,

yeah.

What do you think will happen when we run this code now

and keep in mind that we have the return

before the console dot log, in both cases.

So in the, if block here and also in the else block.

So what do you think is gonna happen with these

console dot logs?

Well, let's see.

And indeed they are simply ignored,

so they will not get executed.

Because as I said before,

the return statement immediately exits

or immediately returns the function.

And so therefore there is no chance

that this code here is even reached.

So if we want this one here to execute,

we need to put it before the return

and in vs code, I can simply hit option or alt up.

Okay. And that will then move the line up.

So we can,

we also have that here somewhere in this menu.

So that's move line up and move line down.

So just so you see which one is the shortcut.

So I use that one all the time.

I also use add cursor below all the time,

and I also use add next occurrence.

So that would be command or control D.

So what this means is that we have, if we have

this for example, here select it

then we can already see all the other ones.

But if we hit command D then it will actually select that.

So you see. Now we have these four selected.

And so we now could replace all of them at the same time,

for example, like this. Okay.

But anyway, let's go back to what we were doing here.

So I just moved the console dot log before the return here.

And so now there should be a chance that the console dot log

is actually executed before the value is returned.

And so let's do the same here.

So again, I'm hitting option or alt up.

Add to these two lines to changed position,

and now, yeah, now it works.

So we get the string and here we get,

Mike has already retired.

Okay.

So this was to show you some more things about functions

that we had already learned,

and also show you something new,

which is the fact that the return statement here

immediately exits the function.

So we reviewed already some things here,

but now it's time to really review everything

that we learned so far about functions

in these first couple of lectures.

And here we have the three type of functions

that we talked about.

So we have first, the function declaration,

and one particularity about function declarations

is that they can be used before

they are declared in the code.

Second, we have the function expressions,

and they are essentially function values

that are stored in a variable.

And finally, we have arrow functions

that are in fact also function expressions,

but special ones.

And these are great for quick one line functions

where we don't need to explicitly use the return keyword

and no curly braces either.

I also said that this one has no this keyword,

but more about that in one of the future lectures.

Now what's important to note here is that

these are three different ways of writing functions,

but they all work in a similar way.

So all of them can receive input data, they transform data,

and then they can output data.

It's all optional,

but usually that's the things that functions do.

And no matter which type of function we use,

we can always do these three things.

And now let's zoom in a little bit further

and take a close look at the structure of a

common function let's say.

And this one here is a function statement,

but it works the exact same way

for all other types of functions again.

So first, usually a function needs a function name.

So calcAge in this example,

then a function also has parameters.

And these parameters are essentially placeholders,

that receive input values.

So, as I said before,

these are a little bit like local variables of a function.

So variables that are defined

only inside of this very function.

Now, as you also already know,

we use functions to reuse pieces of code,

and these pieces of code are inside the function body.

So this is where the functions input data

is usually processed and then returned.

And speaking of the return, by the end of the function,

we usually have a return statement,

which we use to output a value from the function.

And also, as I mentioned a little bit earlier,

the return statement also immediately terminates

the function's execution.

We also say that the function returns, okay.

And now about calling the function,

we do that using parenthesis.

So we write the name of the function

like we did here with calcAge

and then with a parenthesis we call the function.

Because without the parenthesis,

the function is really just a value.

But then with the parenthesis,

we actually called a function.

And we can also say that we run the function

or invoked a function or execute a function.

And all of these terms kind of mean the same thing.

Now, in this case,

since the function actually has parameters,

we then call the function with arguments and these arguments

are the actual values of the function parameters.

So we use these to input the actual data into the function.

And we can also imagine this as replacing the placeholders

that are the parameters.

Then once the calcAge function has finally done its job,

then all this expression will basically be replaced

with the returned value.

So in this case, the age that was replaced here.

And that age value is what we then store

into this age variable.

So we use this variable to basically save the returned value

that was outputed from the function.

Okay.

Now just one other thing that I want to make clear is

that this console dot log that we have in the function.

So in that first line there,

has nothing to do with returning a value.

This simply prints a message to the developer console,

but it has nothing to do with returning.

Actually the console dot log is actually just

another function call inside the calcAge function

because console dot log is itself a function.

And so the argument that we pass into

the console dot log function

is what will get printed to the developer console.

Okay. So just wanted to make sure

that you really get this distinction

between console dot log and return.

The reason why we always use console dot log

is because we want to see the results of our experiments

in the developer console, in the browser.

Anyway,

I think this pretty much sums up all there is to know,

at least for now about functions.

So make sure that you get all of this down

and then you can move on right to the next video

where the first coding challenge

of this section waits for you.

And as you can probably guess,

it's gonna be about writing your own function

for the very first time.

So I hope to see you there soon.