Original subtitles

So we learned about function declarations

and expressions in the last video

but there is actually a third type

of function that was added to JavaScript in ES6

and that's the arrow function.

And an arrow function is simply a special form

of function expression that is shorter

and therefore faster to write.

So let's actually get back this function expression

from before here.

So from the previous lecture

just so that we have a comparison.

So like a reference point.

And so now let's write the arrow function.

And this is how we write an arrow function.

So again, we want the birthYeah

because we want to calculate the age again

and then we write an arrow

and that's the reason why this function

is called arrow function.

And then we simply write what we want to return.

So in this case,

that's 2037

minus the birthYeah and that's it.

Now, to finish, we actually want

to be able to use this function.

So let's again store it in a variable,

just like we did here with this function expression.

So let's say const calcAge3 this time

and then we set that variable

to this function here, okay?

So as I said, this is a special form

of a function expression

because it still is a function expression actually.

So it's a value, all of this,

that we assign to this variable.

So just like this function expression up here.

But this one, as you see,

is a lot easier and faster to write.

The first reason for that

is that we don't need the curly braces,

like we have here, to define a code block.

And second is that the return actually happens implicitly.

So this value here will automatically be returned

without us having to explicitly write the return keyword.

Okay?

So this is excellent for simple one-liner functions.

And you will see throughout the course

that this is gonna be extremely helpful

in certain situations.

And now to use this function,

it, of course, works the exact same way

as using all the other functions.

So we call calcAge3

just like we called the other calcAge functions.

Okay.

And again, we save the returned value here to a variable

and then let's just check it out here.

And so this one should be 46 again,

just like we had in the previous lecture.

And yeah, it works.

So indeed, the value that we calculated

was returned automatically without us having

to write the return keyword.

Now, you see that here we also didn't need any parentheses

or anything like that.

Just this here is the function.

Okay?

Now, this is actually just the simplest form,

which is when we only have exactly one parameter

and only basically one line of code

in which we want to return something.

But it gets a little bit more complex

when we add more parameters or more code.

So let's now write another function

and we can get rid of this one

since it was just a copy anyway.

And so let's say that we want to calculate

how many years a person has left until retirement.

So let's call this function yearsUntilRetirement.

And then we set that equal to a function.

And once again, let's pass in the birthYeah.

Then the arrow again

but now, here we need some more code

because to calculate the number of years

until the retirement based on the birthYeah alone,

we first need to calculate the age,

and then from there, we need to calculate the retirement age

minus the current age.

So we need more lines of code

and so we are back to actually needing the curly braces

in order to define a code block like this.

So let's do what we just said.

So calculate the age based on the birth year.

So 2037 minus the birthYeah

and now let's calculate

the years until retirement basically.

And so let's say that the retirement age is 65 years,

as it is in many countries here in Europe at least.

So 65 and then minus the current age.

And that will then give us how many years we have left.

And now to return this retirement,

we actually need to write the return keyword explicitly.

So we can only omit the return here

in case we have a one-liner function like here.

But if we have more,

then we need to do the return still.

So let's now run this function.

So yearsUntilRetirement

and then again some year

and then as always, we could capture the return value

into a variable.

But this time, let's actually log that value

to the console directly.

So console.log

and yeah, so let's try that.

And so it's 19.

And that makes sense because 65 minus 46,

which is the age, is 19.

Okay?

So that's the scenario when we have one parameter here

and then more than one line of code basically.

And remember, in that situation,

we need the return statement here.

But now, what if we had multiple parameters?

Well, then we need

to wrap the parameters here into parentheses.

So in VS Code, we can just select a variable

and then write parentheses

and then it will automatically wrap this variable

into parentheses on both sides.

So let's say we want the birthYeah

but also the firstName

so that we can like return something else,

like a sentence.

So let's comment out this part here

and instead, let's return a string.

And again, we're using a template string here

to build that string

and basically, I want to say like firstName retires

in x years.

So let's use that placeholder here.

So firstName retires in

and then we use that value that we just calculated.

So retirement.

Give it a save here

and now we need to call it

and so let's add the second argument here

so that it will go to the second parameter.

So the first one here is, of course, birthYeah

and so that corresponds to 1991

and now the second argument will go to the second parameter,

which is the firstName.

So let's say Jonas

and let's just call it twice

so that it actually makes more sense

that we even put this logic into its own function.

So let's say that Bob was born in 1980

and so let's see how many years he has left.

So Jonas retires in 19 years,

Bob retires in eight years.

Great, and that's essentially how the arrow functions work.

You just need to keep in mind the couple

of different scenarios that there are regarding

to the number of lines of code

that you need and the number of parameters.

So as you add more code

and more parameters, it gets a little bit more complex

and we kind of lose the advantage

of using an arrow function.

So now you might ask the same question as before.

What type of function should I use?

Should I use arrow functions for everything

since they're so easy to write?

And well, the answer is no.

But it's also complicated.

That's because there is another fundamental difference

between the arrow function and more traditional functions.

So function declarations and function expressions.

It's the fact that arrow function

do not get a so-called this keyword.

And this, once more, is a topic for much later.

So remember that learning is not at all a linear process

and so topics need to build up on one another

in an incremental way.

Otherwise, you would just get super overwhelmed

and super stressed if I were to tell you everything

at the same time.

So for now, we will actually keep

using mainly the normal functions,

except for very simple one-liner functions.

For example, like this one here.

And that doesn't mean that arrow functions

are not important.

They absolutely are

and I love them and I use them all the time.

Sometimes I don't write regular functions at all.

But again, you cannot yet understand all the implications

of using arrow functions.

So for now again, we will keep using

probably the function expressions the most.