All language subtitles for 5. Function Scope

In this video I want to talk about scope in javascript as it relates to functions.

Now you've already explored a scope as it relates to if statements we messed around with that in the

basics directory.

Here we have scoped out J.

S. We learned that in javascript we have a lexical scoping we have a single global scope with multiple

local scopes.

And we learned that one way to create a new local scope is via the if statement so variables defined

in the if statement are only accessible in there they're not accessible outside of there.

And we explored how we can create a little visualization of just this.

Now we're going to take the same rules and apply them to functions.

So what I want to do is just create a new file in the function's directory.

I'm going to call this one function hyphen scope.

J.

S And what we're going to do is copy and paste a function that we've already created in functions 101.

We created convert Fahrenheit to Celsius for the challenge.

Now your name might be slightly different since it was a challenge.

I'm going to go ahead though and take all of the code down here.

Copy it to the clipboard and paste it into function scope and we'll use this to explore how scope works

with functions in Javascript.

So let's go ahead and create a little scope tree to visualize the scope we have for this file.

First up we got our global scope which we always have global scope and we have a few different things

in the global scope.

I have a convert Fahrenheit to Celsius.

After that one I have temp one and I also have temp 2 now.

Inside of that global scope we have a single local scope.

Our functions define a new local scope this scope contains everything created in the code block.

So that would include the Celcius variable but it also includes the function arguments.

So in this case we would have a local scope and this local scope would have a Fahrenheit which is the

function argument and it would have Celsius something defined in the function itself.

This means that we can access Fahrenheit or Celsius outside of the function even after it runs.

So right here I cannot access Fahrenheit I can not access Celsius they are not in scope.

All I can access at this point would be convert Fahrenheit to Celsius temp one or temp two.

So this is the exact same thing we saw with if statements the scope tree gets generated in much the

same way.

We just have a function as opposed to an if statement and the only difference that you really need to

remember is that yes the arguments of a function are also bound to that local scope even though they're

not defined inside of the curly braces.

Now we could add one more thing to this example to make it a bit more real world let's say inside of

the function.

I want to add an if statement if I want to check if Celsius is less than or equal to zero which is the

freezing point in Celsius if it is less than or equal to zero.

I could say the left is freezing equal.

True.

Now in this example what's the scope tree look like.

Well we have a new local scope in our existing local scope.

So I'm going to indent local scope.

And what do we have in the local scope.

We have a single thing is freezing.

So for example we would have the following scope tree inside of this if block we can access everything

because we are either accessing is freezing or we're accessing something from one of the parents.

That means I can access Fahrenheit and Celsius I can access our convert function temple on and temp

too.

So functions function much the same way as if statements when it comes to scope in javascript.

Just because I create something in a function doesn't mean it's accessible outside of a function.

And we're going to explore a more situations where this actually comes up.

For now you just need to keep this in mind that functions create a local scope much like if statements

do and function arguments are bound to that newly created local scope.

And we add a little tree right here to prove it.

All right.

That's it for this video.

Not a whole lot to discuss.

I just wanted to make sure you are aware that functions create a new scope.

We're going to continue on and get back to programming in the next one.

I'm excited to get to it so I'll see you then.