All language subtitles for 003 Arrow Functions_en

You'll learn about let and const, another thing another construct you're going to see a lot in this

course are arrow functions.

That's a different syntax for creating Javascript functions.

A normal javascript function of course looks like this.

With the function keyword. You might also note a syntax where you have var myFunc equals function.

Now an arrow function looks like this.

Here I'm storing it in a constant and then on the right side of the equals sign.

That's the arrow function syntax.

A list of arguments here it's none but it could hold some arguments and then an arrow.

So an equal sign and a greater than sign and then the function body.

The arrow function snyntax is a bit shorter than the normal syntax since it omits the function keyword

and it also and that is the great benefit.

Solves a lot of the issues you often had with the.

This keyword in javascript.

If you've worked with javascript a bit, you probably know that the this keyword doesn't always refer to what

you might have expected it to refer to during you writing your code.

When you use this inside an arrow function it will always keep its context and not change it surprisingly

on runtime.

So let's now move to jsbin to see that arrow function syntax.

In practice. Back in jsbin.

let's create a normal function, printMyName like this.

Now here we can of course output console log name and pass name as an argument.

Now if I call printMyName like this and hit control enter, we get undefined because it didn't pass

anything for it. We do the same with Max passed as an argument.

We get Max. Now the arrow function equivalent is to store it in as a constant named printMyName.

It could also be created with let.

If you plan on re-assigning this variable printMyName as a constant.

And now don't forget to add this arrow between the list of arguments and the function body. If you now clear

and rerun this you'll still see Max.

So here it behaves exactly the same way.

Now the this keyword thing is something you'll see throughout the course.

It becomes important once you add functions to objects of course.

First of all let me show you some alternatives to this syntax though regarding the argument list.

To be precise. If you only receive one argument as we do here, you can also use a shortcut of omitting

the parentheses around it.

That's only valid for exactly one argument though, not for more and not for less. Here,

You will still get the same result. If you had a function which receives no arguments.

This is not valid syntax.

You need to pass an empty pair of parentheses like this.

If we execute this now we also still see Max.

So this works if you have more than one argument.

You also need parentheses.

So name and age like this won't work.

You will need to wrap this in parentheses.

And now you could output name and age and pass both as arguments here.

So these are two different syntaxes you might see regarding the arguments.

There also is an alternative.

Regarding the function body.

So on the right side of the arrow. Obviously a lot of functions just return something.

So let's say here we actually want to multiply something and we get a number as an argument.

Now we want to return number * 2. Obviously what we can do is we can console log the result of

multiply.

So what's returned by multiply and pass two here.

If I now clear this and run this we should see four and we do.

If you have this case where all you do in your function body is return and you have no other code in

there you can omit the curly braces and write this in one line and then you also have to omit the return

keyword. This is a very short version of writing this function.

It gets a bit shorter if we take advantage of the shortcut of removing the parentheses around the single

argument.

And now what this does is it still returns the result of this code.

Here we just omit the return keyword and we have 2 omitted.

And we have a very concise and short way of writing a function that takes one or more arguments and

returns something.

So here clearing and running this still yields 4.

So this is all the syntax you might see and the arrow function in general is something you'll see a lot.

You saw the various syntaxes.

You don't have to remember all of them right now.

Just be aware that there are different syntaxes and if we then use them they'll quickly come back

to your mind and you know why we use a given syntax.