Check out a free preview of the full Introduction to JavaScript course

The "Scope" Lesson is part of the full, Introduction to JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces how scope makes functions useful in JavaScript.

Preview
Close

Transcript from the "Scope" Lesson

[00:00:00]
>> Brian Holt: Let's talk about scope.
>> Brian Holt: Let's talk about scope. [LAUGH] I find this one of the more difficult concepts for new students to grasp, so what's for me? So if this feels hard, that's because it's hard, okay? And if you kinda sitting there, brindled and mushy at this point in time, we're talking about hard things.

[00:00:23]
So it's okay to feel a little overwhelmed. Sometimes you just have to look at some things with fresh eyes, and come back later and look at it. And if you're feeling that right now, I guarantee you, we're not the only person feeling like that. So you are permits to feel this is hard.

[00:00:39]
So I don't know, that helped me when I was in school, and people's, it's okay Brian, you don't have to worry about it. You're not an idiot. I am an idiot, but that's beside the point. So let's talk about scope. Scope is basically, it's helpful in some senses, because it will help you have less bugs in your code, but in helping, you have less bugs in your code, it also kind of helps create bugs in your code.

[00:01:08]
On the whole, it's gonna say it's a good thing, but it is hard to learn. I think that's kind of my final statement on that. So, let's say I have this function called, add five, very similar to what I had before. And addFive takes in a number and returns that number plus five, right?

[00:01:25]
Works exactly like it did before. So I call addFive with ten, that'll return to me 15, right? I'm not doing anything with that answer right now. But sometimes people wanna say, there's some internal variable here called, someVariable, and outside of this function, I wanna access that, right? Maybe it's really useful to me and I wanna use it later, so I try and do console.log(someVariable).

[00:01:49]
Which is inside this function addFive. This is reference error, someVariables not defined. That's because this variable here, someVariable is only in scope for the length of this function. So that means, whenever I define this variable here, as soon as this function ends, it throws out everything, right? It throws out everything that was only in scope for that particular function.

[00:02:17]
So in this particular case, some variable here is created here at the top. And then when this function finishes, it throws it out. There's numerous reasons for this, but mostly it's because, you don't wanna keep everything around always, right? You wanna be constantly getting rid of things that you're not using.

[00:02:36]
And then you wanna be adding things that you are using, right? So it's kind of that constant cycle for it. Now, if I have a function here, const another variable.
>> Brian Holt: Something else.
>> Brian Holt: I can access this inside a bad five. So if I said console.log, another variable.

[00:03:06]
Another variable, notice that something else does get logged out here. Now why is that? That is because, another variable is in scope, right? So whenever addFive is called, which is down here. Another variable is in scope, because this was created outside of it, right? So it can see that.

[00:03:30]
Another variable only goes out of scope, when this entire bought this entire block finishes. And this isn't just limited to functions. So typically, this is where you gonna see the problem, this is also like if statements. So if I say, if true, right, we just wanted to run, or you can say 2 plus 2 equals 4, whatever you wanna do.

[00:03:54]
If true, and I say cost, yet some other variable running out of names here. Only in scope for the statement.
>> Brian Holt: And I say, consolelog. Here, yet some other
>> Brian Holt: So this is obviously the scope, right, because I'm before the curly brace, and here is my kind of mostly true pro tip for you.

[00:04:28]
A block is between curly braces, right? So if I have this curly brace here, and this curly brace here, anything that's declared inside of here, will die as soon as this curly brace ends, right? Same thing here. So I have this curly brace here, and then whatever's declared inside of here, and the key here is const, right?

[00:04:45]
This is being created here. This is the first time this comes into existence. As soon as this block finishes, that means, that anything that was declared inside of there is going to go away. It's going to go out of scope. So if I move this, this console log outside of the if statement, what do you think's gonna happen?

[00:05:07]
>> Speaker 2: It won't work.
>> Brian Holt: Reference error, right? Some other variable is not defined because, now it's out of scope.
>> Brian Holt: How do we feel about that? Makes sense? This works for for loops as well. If I declare something inside of a for loop, then I try to access it outside of the four loop, then it's gonna give me a reference error.

[00:05:29]
And when it says reference error, it means something has gone out of scope. It's, I can't see what you're asking me for.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now