This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.

Check out a free preview of the full JavaScript: From Fundamentals to Functional JS, v2 course:
The "Scope Walkthrough, Part 1" Lesson is part of the full, JavaScript: From Fundamentals to Functional JS, v2 course featured in this preview video. Here's what you'd learn in this lesson:

With the aid of students, Bianca walks through a series of tests about the nature of scope.

Get Unlimited Access Now

Transcript from the "Scope Walkthrough, Part 1" Lesson

[00:00:00]
>> Pointer is that you get a little clue here. So these represent every rule, and we'll test it out. We'll try to predict what ACTUAL is gonna be, in each one, so here this one's done. I'll walk through this one, and then you guys can walk through the next one, okay?

[00:00:21] So, once this function is executed, we're creating an fn variable and we're saving a function. We're skipping over the body of the function, however we're invoking it here so that means we jump into the body of the function. We are creating a variable called name and we're assigning it to the string inner.

[00:00:41] We're assigning ACTUAL, which is a variable in our parent scope, to name. So once this is done executing we jump immediately to this next line. ACTUAL equals inner because ACTUAL is available to both this scope and, this outer scope, because it's a parent of both. So ACTUAL is equal to inner, and if we really wanna get fancy with this expect, is being evaluated.

[00:01:13] It's being called and it's gonna go into the innards of our testing library. And it's gonna return, something that will be evaluated against whatever this value is. Cuz you can also expect this to be false, or to be a function, stuff like that. This rule is called a function has access to its own local variables, so when we say own local, that means it's in the same function block, Cool?

[00:01:52] All right, The next one is inputs to a function are treated as local scoped variables. Who wants to go first? Not all at once guys I know this is exciting stuff, Anyone? You could just raise your hand, okay Michael.
>> True.
>> No no, you have to run the code just like I did.

[00:02:19]
>> I have to talk about it? Okay,-
>> So the very first thing that's gonna happen.
>> Okay, we create the function fn, and pass it the argument name, or the variable name.
>> Yeah we're gonna create a variable, and we're gonna assign it to a function, right?

[00:02:37]
>> Yeah.
>> Okay, cool what's the next thing that happens Ammie?
>> And then we're gonna call the function and pass it inner.
>> And then Abdi, what happens next?
>> [COUGH] We immediately run to, expect.
>> Well we call the function, what happens then? You go into the body of the function, right?

[00:02:59]
>> Sorry yeah yeah yeah sorry yeah so we go inside the body of the function and we assign inner to, ACTUAL.
>> And where does inner come from?
>> The argument, parameters.
>> Yeah.
>> Yeah the argument got passed in which didn't get reassigned to ACTUAL.
>> Yep, and then Chris what happens next?

[00:03:21]
>> And then it falls down to expect ACTUAL, equals inner to be true.
>> Cool, Any questions about this? This is what we would expect, right?
>> I was thinking that.
>> [LAUGH] Yeah the question marks mean fill in blank. Cool okay Eddie do you wanna try the next one?

[00:03:52] So this rule is blocks scope, block scope, can be created with let.
>> So line 31 function is created, with the name fn.
>> And then Cameron.
>> The variable where is created and assigned-
>> Actually we don't enter into-
>> Right, call the function.
>> Yeah we go down the next line and then we call the function and then, Ben.

[00:04:25]
>> Inside the function, we declare a variable where, we set it to the value outer.
>> Okay, and then Dan.
>> [COUGH]
>> We create a new scope and, another variable named where called inner.
>> So we create a variable with the keyword let with inner, and we talked about this a little bit before.

[00:04:55] But let creates block scope, and our block is anything with two brackets. So I've been talking about function blocks and, that's really what most of JavaScript scopes is about, is function scoping. But, with the keyword let in ES6 we also have, block scope as well. And people coming from other languages should be pretty familiar with block scope,.

[00:05:19] Or other languages with block scope, it's pretty common, okay.
>> So, ACTUAL is assigned the value where, which in this case would be outer.
>> Okay, and then I have an outer.
>> It goes down to the line 39, and the question marks become I think it's outer because inner would be out of the scope.

[00:05:50]
>> Yep, exactly, Cool, and if this was var, How would that change?
>> No longer be a block.
>> What's that?
>> It would no longer be a block.
>> Yeah.
>> So you would just rewrite the same variable.
>> So it would be actually be inner, Cool, questions there?

[00:06:14]
>> Is it just let in the S6 that creates its own block or are there other verbs that do that as well?
>> I think it's just let.
>> Okay.
>> Yeah.
>> [COUGH] And because it's withing a block, inner's not getting reset, or inner's just specific to-

[00:06:35]
>> It's just specific to here yeah, exactly so outside of this, it looks in its own scope. If there's a value that matches that variable, and we have it here. Well let's look at ACTUAL so ACTUAL we'll first look in this scope and this function scope and say, is there an actual around here?

[00:06:57] And no there isn't, right? There's no defined actual, and then we'll look up in the next scope, it's not there either. And then we'll look up in the next scope, where it lives, and it will find that and it will realize that, it's undefined.
>> So does inner, another way or get created in memory of that scope, and then when you exit the scope does it disappear?

[00:07:19]
>> Yep, And also some funny things happen with scoping as well, when Chrome optimizes your code. So if you're going through the debugger, and you're trying to access variables that would be accessible in that scope, does that make sense? So it should be accessible, but in the Chrome debugger tools they aren't.

[00:07:41] Because there's an optimization step where if you're not actually referencing that value. It just gets garbage collected, it doesn't exist there. So that's just one thing to keep in mind, we'll look at that in depth later, okay? Where did we leave off, okay, so line 42. Is a function has access to the variables contained within the same scope, that function was created in.

[00:08:12] All right, so what did we leave off? Is it your turn Josh?
>> So on,-
>> Line 43.
>> On line 43 we declare a variable, and set it to outer.
>> Yep, Ausmere.
>> So we have the function declaration fn.
>> Create a function there, save it in, fn.

[00:08:40]
>> All right, in the function ACTUAL is assigned to name.
>> Well first we have to call it.
>> Yeah you gotta call it.
>> Yeah, so then we call the function, and I'm really picky about that to say no and then, we'll go back to Michael.
>> So we just did the-

[00:09:00]
>> We just called the function.
>> Okay so we go into the function itself, we create a variable called,
>> Where are we creating the variable?
>> Yeah.
>> We're just assigning it.
>> Yeah, we're saying fn to a function.
>> We call the function we go into the function body.

[00:09:20]
>> And then we set in ACTUAL to name.
>> Yeah, and what is name?
>> It doesn't sit in its normal scope, so it looks up to outer.
>> Okay, okay You wanna go next Jimmy?
>> Sure, we are defining first fn as a function.
>> Yep.
>> Then we jump down to first function, which then jumps back into the function we created up top.

[00:10:02]
>> And then Chris.
>> Yeah.
>> And then we create a variable local to first function set to inner.
>> Okay, Eddie.
>> [COUGH] So then, We're at line 56 in the expect. Okay, and so, we've gone inside of the expect and, the function is setting the local first function to ACTUAL.

[00:10:41]
>> But it's not being called.
>> It's not?
>> You see it being called?
>> Well so I guess I thought expect was being called cuz there's the open parentheses after it, is that incorrect?
>> That's correct expect is being called.
>> But the function inside of expect is not being called-

[00:11:00]
>> Well I'm just saying we should be mindful of whether or not it's being called.
>> [LAUGH]
>> We don't visibly see it being called,
>> Okay.
>> Right?
>> Right.
>> But we can assume that it's been called in the expect if this test works, right?
>> I think I get it.

[00:11:18]
>> So it's not beeing called yet?
>> Well, my point is is that this is a function, this is just an anonymous function, that we're looking at. And Eddie was just acting like it's for sure being called but, technically we don't know that. Because we don't really know what to expect, is gonna do.

[00:11:36]
>> Okay.
>> But, it seems like the way it's set up, that it's probably being called, I'm just being picky.
>> [LAUGH]
>> Because we don't know anything necessarily about the internals to expect.
>> Right, so there was just an assumption there and I wanted to point out that, there's an assumption.

[00:11:52] That I expect inside of that function is calling this anonymous function, but we can't visibly see that right now, that's all. That's all it's like the definition versus invocation thing, okay.
>> So then I could safely say that function inside of expect is being defined.
>> Yes.
>> Okay.

[00:12:13]
>> And then I'll give it to you that yes it is actually being called into expect, but yes. Okay Cameron, So we're saying here we're expecting this to throw, An error, Why?
>> I'm not sure where we're at it's, to throw next to cover.
>> Nope, to throw has not been covered yet.

[00:12:43]
>> Okay.
>> But my question really is so we're saying this function is being executed. And this expect statement is saying is we're expecting it to throw an error, And, why is that? It's not important for us to go into the internals of how is running for this particular case.

[00:13:02] But we should, Know why it's throwing an error.
>> It's a local variable in that anonymous function being set.
>> Yeah, and it doesn't have access to this one, so it's referencing a variable on a different scope. And it's like really in a different scope but it's way over here.

[00:13:32]
>> So would that just throw ACTUAL is undefined?
>> No no no it's not at all it's not ACTUAL it's this one local to first, is undefined.
>> Yeah okay.
>> And then, Aisha do you wanna go next?
>> Sure, The next expect, Is,
>> If you want me to scroll or anything, let me know.

[00:14:05]
>> Yeah I want you to scroll probably.
>> Which way?
>> Up. [LAUGH]
>> Tell me when.
>> Probably right here cuz I think it might it's global okay, go back to the global variable, [LAUGH] so, For each so it's null.
>> Did you guys catch that? So it's null because before each, each statement would reset the value to null.

[00:14:37] And in this case we didn't set it to anything cuz we threw an error. Because we were trying to access a variable in, in a scope that we don't have access to.