Check out a free preview of the full Complete Intro to Web Development, v3 course
The "Scope Example" Lesson is part of the full, Complete Intro to Web Development, v3 course featured in this preview video. Here's what you'd learn in this lesson:
Brian walks through an in-depth example of what is in and out of a variable's scope.
Transcript from the "Scope Example" Lesson
[00:00:00]
>> Let's do the most contrived example I can possibly think of, that you and I are gonna work through this piece by piece. So down here, I have a bunch of console logs. And you and I are gonna go through and we're going to identify which one is gonna work and which one's not gonna work.
[00:00:20]
So const A = "A" up here, and then I have let F. Now, notice I don't assign F anything up here. All I do is just declare, hey, world, there's an F variable, and it exists here, okay? I have a function called doStuff. But it's not called yet, so we'll come back to that when it's called.
[00:00:41]
I have a let E = here, and then a while loop where it increases E. So the first thing that we have here is a console.log(A). Is this one going to work? Or let me rephrase that question, is A defined here? And when I say, is A defined, that is synonymous with asking the question, is A in scope, okay?
[00:01:13]
Where is A defined? Here. So this will work, right? Because this exists outside of the scope of this, so therefore, it'll be in scope inside of here. So we're good, everything's fine there, okay? And then I define a variable here called G, okay? I'm then gonna try and console log(E) here.
[00:01:37]
Is E defined? It is defined, right, cuz we declare it here, and so it exists outside of this while loop, right? So it exists in the same scope as this console.log. So that one works, that's okay. How about console.log(G)? G is defined in here, which is inside of this scope.
[00:02:03]
Once this goes out of scope, everything that was declared inside of it gets thrown away. So this doesn't work, right? This is not defined here, you'll get an error here, okay? We then called doStuff with B as the parameter, okay? So we're gonna go here to our function doStuff.
[00:02:23]
This is gonna be equal to B. First thing we're gonna do here is console.log(B). Is this gonna work? Yeah, the parameter here, it comes from here, so that's in scope that works. I declare C, I declare H. I do an if statement here, this will run, so I declare D here, and then I declare H to be something else.
[00:02:46]
So I did a let here. It was assigned something and then I re-assigned H to be literally something else. So I'm gonna call console.log(D) here. Okay, so where did D come from? Where did D come from? It's there. Is D defined here? Well, we have this if statement, that's where we declare D.
[00:03:15]
So as soon as this if statement finishes or this if block, right, it's gone, right, D is thrown away. So this is gonna be an error, okay? H, So where does H come from? H is up here, right? But then H is redeclared here to be something else.
[00:03:38]
So is H in scope? H is in scope because it matters where it's created, where it's declared the first time. You can modify and re-modify it, that's totally fine. So H is still in scope, because it was created here. It didn't end, the scope that contains H has not ended yet, right?
[00:03:58]
So H still exists. So here, this works, this is okay, okay? And then here, I have F = F. So we have let F here, this created F, but it did nothing with it, right? Here's when I said F for the very first time. Which is fine, you can totally do that, you can declare things and not use them until later.
[00:04:24]
You usually do that when you're trying to declare them outside of the scope and then define them later. Okay, so our doStuff now has finished, so we're gonna come back to here, right? So console.log(B), is this gonna work? Well, B is the name of the parameter here. And this function has finished, right?
[00:04:48]
We're done with that function. So B is not in scope anymore. So B went away, so this doesn't work. This is broken. Okay, C, let's go find C. Here, this is created inside of the doStuff function. So this function has been run and it's already finished, so it's out of scope now.
[00:05:15]
So it's been thrown away. So this doesn't work. And what about F? Well, F is created here, right? And we've changed the value of it here, but what matters is where it was created. So it was created here. This block is still going, nothing has changed in that perspective, so this is still in scope, right?
[00:05:43]
So F here works, it's in scope. I just showed you, I don't know, 15 different permutations of this scope problem, just to kind of show you the process that I mentally go through of saying, why does this exist or not exist, right? And I do this again down here.
[00:06:06]
This is the exact same thing, but I just went and left notes on every single line. So if you wanna go back and review this later, the answer key is here. All right, this works, B parameter is still in scope.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops