Original subtitles

Welcome back, so I hope that you studied

the last lecture really well,

so that you really understood what we did there

with our food processor function.

Now in JavaScript, there are different ways

of writing functions.

And each type of function,

works in a slightly different way.

But don't worry, they're still all very similar.

So let's find out now.

So the functions that I showed you in the last lecture

are called function declarations

because we simply use the function keyword

to declare a function a bit like we declare a variable.

So let's now write another function declaration.

And this time a function to calculate an age

based on a given birth year.

So let's again use the function keyword

and we're gonna call this calcAge1

and that's because we're gonna have another one later.

So as I said, we want a person's birth year

as an input to this function.

And what is an input?

Well, it's just a parameter in this function.

And the parameter remember it's a bit like a local variable,

that's only available inside of this function

Then the function body with the curly braces

and now the code that we want to create here.

So, how do we calculate an age?

Well, just like we did before

we take the current year,

which once more let's suppose it's 2037

and then minus the person's birth year.

And then remember to take this value now

out of the function, we return it using the return keyword.

So we calculate the age first and then we return that value.

And actually we can simplify this

and basically return all in one go.

So there's actually no need to store this value here

in a variable, if all we do is then later return that value.

So in fact, we can just take this value here,

get rid of this and then simply return the result

of this expression here,

so basically of this operation, okay?

So we're taking the birth year that we're gonna receive

and then use that to calculate the age.

And so once again, this is a generic function,

which is then gonna work for any birth year that we give it.

So of course, let's now call or invoke

or execute this function.

And again, I can use

all of these three words interchangeably,

they all mean the same thing.

So calcAgel and then remember to call the function

we use parenthesis and then we specify

the actual value of the parameter

which is called the argument, remember?

So let's say 1991.

Now some people use the words arguments

and parameters as if they were the same

and actually that's not a big deal

but to be really precise, the parameter is again

the kind of placeholder in the function

and the argument is then the actual value

that we use to fill in that placeholder

that is the parameter.

Anyway, this will now create a value, right?

And the value that this will create is the value

that's returned from the calcAge function

so basically this returned value.

And so, once again, we need to capture

or to save that value into a variable.

So let's call this age1

and just to make sure that it works,

let's quickly check it out in the console.

Okay.

And indeed, we get 46 just like we did before, okay?

So that is a function declaration

but now let's create a function expression.

So that's the other type of function that exists

and it looks like this.

Instead of writing a function with the calcAge name,

we simply write function basically without a name

and then we still define the parameter,

we still define the function body,

which is gonna be the same as this one

because we want another calcAge function here.

So we write a function like this

and then what we have to do

is to store all of this here into a variable

and that variable will then be the function.

So let's call it, calcAge2.

So again, we did write the function in a very similar way,

but we didn't give it a name here,

so it's a function without a name basically,

which is also called an anonymous function.

So all of this here is basically an expression

and remember that an expression produces a value.

And so we use that value in store it into calcAge2

and this will then be the function.

And I know that sounds very confusing

but it will make sense, trust me.

Now to call this function,

we actually do it in the exact same way.

So let's do age2 equals calcAge2

and let's use 1991 again

and then let's grab this console.log here

and log both the ages, So age2 here,

let's also add some comments here,

function declaration and function expression.

And so we should get twice

the 46 value here and yes, indeed.

So the functional expression works

the exact same way as the function declaration.

So we call it in the same way we capture

the return value in the same way

and then of course the result is also the same

because the function body is the same.

But it's very important to know

that we have these two type of functions in JavaScript.

Because in some places we will actually need

to write them like this,

as you will see as we go through the course.

So again, this part here that I just highlighted

this function here is in fact an expression

and remember that expressions produce values.

And so we just assign this whole value here

then to this variable.

And so this variable will then hold

this function value basically.

And one big implication of what I just said,

So, that this here is just a value, yeah,

is that in fact in JavaScript,

functions are actually just values.

So just as a number or a string or a boolean value.

So a function is not a type, okay?

It's not like a string or number type

but it's also a value.

And so if it's a value, we can store it in a variable.

So just keep this in mind

because it will become very important later

when we really dig deep into functions.

Now, besides these technical differences,

you might be wondering what is the big deal?

So what's the big difference between

function declarations and function expressions?

Well, the main practical difference

is that we can actually call function declarations

before they are defined in the code.

So let me show that to you.

So here is the declaration, right?

This is the function declaration and as I just said,

we can call them in a code before they are defined.

So now we're calling it first and then defining it later.

So let me show you that that still works

and indeed we still get the same result.

But if we attempt to do the same with the expression,

then that should not work.

So let's see and yeah,

so cannot access calcAge2 before initialization, okay?

and internally this happens

because of a process called hoisting

but more about that in a future section, okay?

For now just keep in mind that you can call

a function declaration before you define it

even though that might not be such a good idea in many cases

but you can do it if necessary.

All right, now another question

that you might have in your mind

is which of the two types of functions should I use

when I write my own functions?

And well, the answer is that oftentimes

it's really just a matter of personal preference.

and so different developers prefer different formats.

Personally, I prefer to use function expressions

because this then forces me into a nice structure

where I have to define all the functions first

at the top of the code and only then I can call them.

So this makes the code a little bit nicer

and more structured.

I also like to have everything stored in variables,

so both values and functions, but again,

that is just my own personal preference.

And many other developers don't agree with this

and prefer to use function declarations.

So, if you also prefer a function declarations, that's fine.

So, just use declarations then.

It's absolutely no problem.

However, even if you prefer one over the other,

you still need to know about both

the function expressions and function declarations.

So you can not just pick one

and then forget the other one

because both have their place in JavaScript.

And so it's really important that you know

how to use and how's to distinguish

both function declarations and expressions.