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 Setup" 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 an interactive exercise with students, Bianca will start a series of tests about scope, which determines the accessibility of variables.

Get Unlimited Access Now

Transcript from the "Scope Walkthrough Setup" Lesson

>> We're gonna move on to scopes now, we're gonna do an interactive exercise. We're gonna do that game that we really liked to play. Everyone was like, I really like it. Bianca when we play that game where everyone goes in a line and says what happens next, especially when it's tricky and I say the wrong thing.

[00:00:20] Just give you one of those moments. So, we're gonna go through this, is it a testing suite, and all these tests are testing various combinations of scope. And so, scope is just the area where a variable has access to some value. So, when we're defining variables we know that there are such things global variables and local variables.

[00:00:51] And the like write a global variable is available throughout the entire code base, and usually we declare that by just not putting a bar in front of something, right? Usually not a good idea or we can attach it directly to the window object. So, that's a global variable and then we have local variables that are inside of functions or inside of blocks.

[00:01:19] And there are some trick rules around when certain variables have access to certain values and not. And so, we're gonna go through some scenarios, we're gonna run this code and see what happens. And then there's the testing suite here, we wanna get the test to pass. So, I'm going to describe what these tests are doing so that we get a little bit familiar with this code base.

[00:01:44] But really what you are should be worried about is the function body of the callback of the it's statement. So, when it says it bla bla bla its the body of the function, but let's start at the top. So, this is just a regular testing suite, I think it's Mocha maybe.

[00:02:11] And we're wrapping it in this function, it goes all the way down here and then we're immediately invoking it, that's what those parentheses are doing. So, it's just wrapping an anonymous function and then invoking it immediately, and then we have this describe block. What do you think if I did type of describe?

[00:02:34] What do you think that would be? Cameron
>> Undefined.
>> Undefined? It's a good guess.
>> Object.
>> Object? Who thinks it's gonna be an object? Who thinks that it's gonna be something else? What do you think it's gonna be Eddie?
>> A function?
>> Why?
>> Because it has the parentheses of like scope exercises etcetera right next to it like

>> Yeah, it looks like it's a function being called, right? Yeah, and that's what it is. So, describe is a function it takes two arguments, one is a string that describes this block, and then a callback function that has a few different tests. And so if we look at our UI over here we see that it creates this scope exercises, title and then it has all of our tests inside here, okay?

[00:03:50] So, we have an actual variable that we're just initializing here, then we have a beforeEach function is beforeEach function just is called beforeEach it block. So, will you see this ending? This will be called automatically. Have you guys done touch test driven development or written tests like this?

[00:04:16] Cool [LAUGH] awesome okay. So, then we have an it block, and what do you think this is? If we said type of it?
>> Function.
>> Also function? So, the first thing it takes is a string that's a description of what it is testing, the second thing is a callback function that it's expecting it to return whether it's passing or not.

[00:04:51] So, this saying says, expect actual to equal the string inner What do you think this evaluates to? What does that return?
>> A Boolean.
>> That's a good guess, it has to return some sort of object, right? Because we have these dots.
>> so, Boolean [INAUDIBLE].

>> Some sort of object that has something like this. You see that?
>> Like an array of objects?
>> Well, that's the only way you can these dots to work in JavaScript, right? we should put something like that. Anyway, I'm just showing you that there are some interesting applications to all of the rules that I was saying before, but they don't change.

[00:05:57] They look a little crazy, but people are just building on the roles that we went over and doing creative things with them.
>> They're asking where does come from? That from?
>> I believe it's Mocha.
>> Okay
>> Yeah. I think the describe beforeEach and it is mocha, and then the expect, maybe try.

[00:06:26] I don't know I'd have to look I haven't looked at
>> To the libraries, but the library is basically all you have to say there.
>> Yeah, it's for the library we're using a library here, and I'll share this after you guys can have it and play with it.

[00:06:40] Okay so, I just gave you a little tour.
>> Is there a reason actual is all caps?
>> Just to make it stand out really, yeah, cuz if you see we're going to be reassigning actual bunch of times, just to see what the value will hold, yeah. Cool and so, knowing that in JavaScript we have function scope.

[00:07:14] Do we know that? Have you guys heard about function scope? Is that something you've heard of? So, before recently we only really had function scope, and that means that variables that were inside of a function only had access to the values defined there, or in the parent function.

[00:07:34] So, for example here's a function here's an inner function, okay? If we had a variable name for example we couldn't access it over here. Because it's outside of this function's scope.
>> So, in the function or child functions?
>> What do you mean?
>> The use of parent function before?

[00:08:07] So, you can access variables declared in a function or in functions declared in that function, but not the other way around.
>> No only in the parent
>> Only in the parents
>> So, you can only look up.
>> You can only look up.
>> So, if you think of scope as sort of like a hierarchy, you have a global scope being available to everyone, and that's your window objects, things on the window object if you're working in a browser.

[00:08:30] And then you have your first function and then your nested function and you can think of it as like your global scope, our scope, inner scope, more inner, inner, inner all the way down as many deep. Yeah and so, inside the function you can only reach for values in the outer scopes all the way up to chain them.

[00:08:58] And then, through that sort of chaining from inner to outer, we have masking of values. So, if I declare a value in here and I also declare a value out here. Then this name is going to be inner, even though the name out here will be mark and so once I get out of this function if I reference name this is gonna be mark.

>> My name's in a video looking famous.
>> Yeah you're famous now.
>> Thank you Bianca,
>> You're welcome.
>> There's a question in chat about the very first line the,
>> Line one?
>> Immediately invoked function expression?
>> What about it?
>> Just didn't know I was there, I'm like.

>> I didn't know what if he is and I mean.
>> Yeah, so,
>> Is there something you're getting into?
>> Not really.
>> Okay.
>> All you need to know is what this does is it lets you call the function immediately. So, once this page is loading, we'll just call this function immediately, that's all, and we'll set up all of our tests.

>> Let me show the bottom part of that.
>> Yeah, I showed it earlier, but I can show again. So, here we are calling it there's a clue down there, I should get away from this, okay great. So, we're gonna walk through how the function is running inside of these it blocks