All language subtitles for 008 Revisiting Functions & Parameters_en

Now, besides the variables and constants,

an ever crucial JavaScript concept are functions,

which can either be created

with help of the function keyword

or with help of this arrow function syntax,

to which I'll get back in a couple of seconds.

Let's start with the function keyword.

The idea behind functions,

no matter how you are creating them,

simply is that you're defining some code

that's not executed immediately,

but instead, at some point in the future

when you call the function

and that can be executed as often as you want

because a function can be called multiple times.

Now, to show you what I mean,

let me finish this function.

And this is how you write a basic function.

You give it a name which comes after the function keyword.

Then you have a so-called "parameter list",

to which I'll get back in a second.

You do create it with a opening and closing parenthesis

and you need these parenthesis here

and then you have opening and closing curly braces.

And between those curly braces,

you put your function code.

So, the code that's not executed right now

but at some point in the future.

So, for example, here,

I could put a console log statement

into this greet function,

and if I would save this and reload this page,

you would see nothing in the console.

The reason for that is that this function is defined

but never executed.

Because as mentioned,

with a function, you're defining code

that's not executed immediately,

but at some point in the future when you call the function,

when you invoke the function.

And you do that by using the name of the function like this

and then adding another pair of parenthesis after that name

but without the function keyword in front of it.

With the function keyword in front of it,

you're defining it like this,

you are calling it.

And now, when this code is encountered in your code file,

the code in the function will be executed.

So, now with this added, if I save this

and if I reload this page,

now, I do see "Hello!" here

because now we're calling the function.

And, as mentioned,

I can call the function as often as I want.

You can literally add as many function invocations here

as needed, and if you save that,

you'll therefore see "Hello!" being output five times.

Because I have five function invocations here.

That's how you define and call a function.

And this is a super important concept

which we'll use all the time throughout this course.

Also, especially, in React, it turns out

that we'll define a crucial React building block

as a function,

but you'll learn more about this later,

once we dive into React.

Now, functions cannot just be defined and executed

like this.

Instead, they also take so-called "parameters",

input values.

For example, "username" and "message".

You can add as many parameters as you want.

You simply separate them with a comma.

These parameters are then available inside of the function

and only there.

So, here I could then output "username"-

Whoops.

With a capital "N".

And then, thereafter, also "message".

I can do this because I'm accepting these two parameters

and since it's your function,

these parameter names are up to you,

but they have to follow the same rules

as these variable names did.

And the same, by the way,

is also true for the function name.

This should also be defined just as you learned it

for the variable names.

For example,

if it's a word that consists of multiple words,

you would also use this CamelCase notation here.

So, now this function takes two input parameters.

Therefore, when you are calling this function,

you also should provide values for these input parameters

because in the end,

the idea behind using parameters

simply is that you can have one reusable function

that can be reused with different input values.

For example, here, I could call it

with "Max" and "Hello!" the first time

and then call it again where I greet Manuel

and say, "Hello, what's up?" like this.

Now, I'm using the same function

with different input values.

That's possible, thanks to parameters,

and therefore, If I reload this,

I see "Max" and "Hello!"

and then I see "Manuel" and "Hello, what's up?"

Now, what's also worth noting here

is that you can also assign default values to parameters

by adding an equal sign here.

For example, "Hello!"

This would allow me to call this function

without providing a value for the second parameter.

And if I don't provide one,

the default value will be used.

But I can, of course, also override that default value

by simply providing a value for that parameter here.

With that, if we reload this,

I get "Max" and "Hello!" thanks to this default here

and then I get "Manuel" and "Hello, what's up?"

where I do use this value for overriding the default.

Now, functions cannot just take input values

but they can also return values

by using the "return" keyword.

So, for example, in this function,

instead of console log in username and message,

I could return a string that combines both.

I could return a string here,

where I say, "Hi I am", a white space here,

and then I add the "userName"

and then another white space or dot maybe,

and then the message.

So, now with that, I'm using this function here

to, in the end, construct a string

based on these input values.

And we could also use "return"

if we would not accept any parameters.

In this case, I'm using the parameters

for deriving the returned value,

but if you have a function

that doesn't need any input in order to work correctly,

you of course also don't have to accept one.

Parameters and the "return" keyword

work totally independent from each other,

but, as in this example,

they can also work together.

So, with that, this function here no longer greets a user,

but instead creates a greeting.

And therefore,

we also might want to rename it

because whenever you name things,

functions, variables, whatever,

you should describe what's stored inside of it,

in case of a variable or constant,

or what it does in case of a function.

So, here, since it no longer greets a user

but instead creates a greeting string,

we might want to rename it to "create greeting".

And then when we call it down there,

we, of course, also no longer get any output in the console.

Instead, now, we should store the result

in a constant or variable

because this function now returns a value which we can use.

We could use it as an input for console log, for example,

and the offer, in that case,

we would see, "Hi, I am Max. Hello!"

Maybe we should add a white space after the dot here

to improve the formatting.

But since this here is not great

from a readability perspective,

we instead might want to store it in a constant

or variable like this and then use that constant

or variable so that the overall code is more structured.

So, with that here, we could get our two greetings

and then, of course, also, console log these two greetings.

And therefore, we would see those greetings again.

So, functions can also be used for producing

and returning values

and they should be named such

that it's very clear what a function does.

Though, in the end, of course,

just as with the variable names,

the function names are up to you.