Jonas: 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.