All language subtitles for 6. Arrow Functions

In this video, let's quickly get ourselves familiar with arrow functions.

So arrow functions are a new way of writing functions that have been introduced into JavaScript in ES6,

and they are very helpful for writing quick and short one line functions.

Now many people actually use arrow functions for all functions now, but I personally really don't like

that and I only find them useful for well, as I said, these one liner functions.

So let's say that we want to write a function which automatically does this part here.

So it takes in a value that is supposed to be a date and we'll get the year.

So based on this convention, that or dates are always written in this format right here.

So date dash month.

Dash day.

So the let's say, old way of writing that would be simply to use the function keyword.

Then let's say get here.

And it receives a string and then we can return.

Just like we did up here.

Let's actually copy this to make it a bit faster.

And then we could use.

Get year.

With, for example, the publication date that we already have.

And so this results in 1965, just as we have here.

So this is the traditional way of writing functions, which I still use all the time for longer functions.

But now we also have arrow functions.

So let's see how we write an arrow function.

So the function is basically simply the argument.

Dandy arrow.

And then what?

We want to return.

What is Dot split?

And then the first element.

And that's it.

This is a function.

And maybe you noticed that the prettier extension that we're using in this course did automatically

wrap this parameter here inside these parentheses.

And that's because we can actually specify multiple arguments or parameters and then we really need

to use the parentheses.

And so that's why Prettier placed them there because like this, we cannot make any mistakes.

So we could really pass any number of parameters here in that we want it.

And then based off those, we can then return something.

So again, this part here is automatically returned without us having to write the return keyword explicitly.

Okay.

So let's just turn this one here off because now we want to reuse this get year name because right now

this is a function, but we cannot really use it because we haven't stored it anywhere.

So we can just do this const get year and then store that function value into this variable here.

And so this then becomes a so-called function expression as well.

While this one here is a function declaration.

So that's a subtle difference that you might have heard about, and it's not really important.

What matters is that this is an error function where we automatically return whatever is here on the

right side of this arrow.

Now, if we had more code here, so if we had multiple lines, then we would have to use a function

block again.

So using these curly braces, then we could write whatever code we needed here.

And then in the end, we would actually have to manually return again.

So this one would also work the same way.

So you see that we have the result here.

But if you use this block, then you really do need this return keyword again.

Otherwise, as you see, it returns undefined.

But again, the ideal way of using this function is when you really have just a one liner, then you

don't need a return keyword, don't need a function block.

All you need is this.

And this really becomes very useful for callback functions, for example, in some arrow methods, as

we will see later.

Now let's actually use this here.

So for that I will cut.

This part and we'll place it here before the summary, because now I want to use the get function in

here.

Also delete this part.

Actually, I cut it and put it here just as a reference.

And now here, instead of doing it manually here, we can call the function right here inside of the

template.

Literal.

So get here.

And again, publication date.

And the result that we get in the console is indeed exactly the same.