Original subtitles

Now what you see here is one way

of defining a function

but I'm going to comment out this approach here

for the moment because there also is an alternative.

In JavaScript,

you can also create so-called arrow functions,

a syntax that's especially popular

if you're dealing with anonymous functions,

a function that don't need a name.

For example, here in this React app I showed you

in the first course section, you might remember

that on the buttons we had this on click attribute

and we used some React syntax to point at a function

that should be executed when the button is clicked.

And for that here I used this arrow function syntax

to define a function in the place where it's needed

as a value for this click listener.

And this is a so-called anonymous function

because it doesn't carry any name.

It's just the function code.

Now, anonymous functions can also be defined

with the function keyword.

You can define functions like this

and for example, console log Hello.

And we could then, for example, export this as a default

if we wanted to, and we would now be exporting

a so-called anonymous function which doesn't carry any name.

But if you are dealing with such anonymous functions

you can use the arrow function syntax as well

since this is a bit shorter.

When using arrow functions,

you omit the function keyword, you must not use it

and you instead just have your parameter list here

like for example, username and message.

This doesn't change.

Then you have this arrow

and then you have the curly braces

which contain the function body.

You can also still use the return keyword here

if you want to, and that's how you would define a function

using this arrow function syntax.

In this course, you'll see both kinds of functions

using the function keyword

and using this arrow function notation.

Ultimately, it is up to you which approach you prefer

but you should know about both.