So that's functions.
There is way more to functions than what we used
up to this point.
For example,
you might wonder why did I move adult years up here
and so on?
Now I did that because of course,
ultimately I deleted adult years down there
and replaced it with my function call.
But why am I not just creating adult years here
in the function like this?
Now I deleted the adult years definition
outside of the function, and I'm just defining it in there.
Well, let's give this a try.
If we save this code
and you reload your page,
you might still be getting old alerts,
but if you click them away and you reload again,
you will not get alerts again.
And if you open the developer tools
and go to the console there,
you will see an error.
And you should always check that console
if something does not work as expected,
because errors thrown by your JavaScript code
will be output here
in the developer tools in that console.
And here we get an uncaught reference error.
Adult years is not defined.
Hmm, that's a weird one.
I mean, we are defining it here.
Well, that's already a bit advanced,
but it is an important concept.
Here we are creating a variable,
but if you create a variable inside of a function,
it's only usable in there.
And that's also why it's slightly grayed out.
That's visuals to do codes way of signaling
to you that this variable is never getting used
anywhere else in your code.
And you might be saying we are using it down there.
Yes, but that's not the same variable.
Because as I just said,
using let inside of a function creates a new variable,
which is only usable in that function.
And in that function we never use it,
which is why it's grayed out.
We only assign a value
but then we never do anything else with it in there.
And when we try to use it down there,
we just don't find it because outside of this function,
we're never creating an adult years variable.
And before I made the change, we did do that.
So if I do add adult years here like this,
even without an initial value,
then we do define it outside of this function again.
But now I still have a difference compared
to the code from before.
Now I still have to let keyword inside of this function.
And that still has an important implication.
If we saved this code again,
even though I added this variable outside of this function,
if I reload this page, I get my alerts again here,
but they show undefined now.
So I'm not getting an error anymore,
but also not the expected results.
And the reason for that is
that we're still creating a custom variable
inside of this function,
even though it has the same name as the variable
outside of the function.
This is something which is allowed in JavaScript.
It's called variable shadowing.
And it simply means that in functions,
you can overwrite variables from outside of functions.
You can create new variables with the same name
and that will leave the outside variables intact,
it will not delete them or changed them,
it will just create an additional variable of the same name,
which is only usable inside of this function.
And we then assign our calculated value,
queued this internal variable
and hence that external variable,
which is not defined the net function never receives
that value.
Only if we remove let here, inside of the function,
we again tell JavaScript to please assign
that value to this variable,
which is not defined in this function,
but which is defined outside of this function.
And that is something which we can do.
That is what we did before.
And that's how we now ensure again,
that adult years is accessible and changeable
inside of the function,
but then also accessible outside of it.