This course has been updated! We now recommend you take the JavaScript: From First Steps to Professional course.
Transcript from the "Local and Global Scope" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Bianca Gandolfo: So the first thing we're going to, we're just going to jump right into Scope. What is Scope? How many people here have heard of Scope, meh, never heard of Scope. What is Scope then?
>> Bianca Gandolfo: How about Andy, what is Scope?
>> Andy: I'd say Scope is, from what I understand, a set of rules where defines where variables are stored, I guess?
[00:00:32]
>> Bianca Gandolfo: Yeah, so it defines where we can access variables, where variables kind of live or exist. Cool. What about Rich.
>> Rich: Yeah, I look at it as an area where a variable is relevant.
>> Bianca Gandolfo: Mm-hm.
>> Rich: Outside of that scope that variable may not even exist or.
>> Bianca Gandolfo: Yeah.
[00:00:59]
>> Rich: So it's like a hierarchy of maybe spaces, if you will.
>> Bianca Gandolfo: Yeah, absolutely. So, in essence, Scope is where our variables have meaning. So if we try to access a variable outside of its Scope, that variable won't exist and it would throw an error. And the important thing about Scope is Scope is created dynamically whenever we call the function.
[00:01:23] So we think about scope a lot of times as being in the function body itself. And you can sort of think of these two brackets here that define the function body as a representation of Scope. However, the Scope itself isn't created until we call that function here. So, every time we call a function, we create a new Scope.
[00:01:51] So, if we call this add function three times, we then have three Scopes created. And that's why we can have different values in the function body. Using the same function, have different values for our parameters for example, or anything. You have a question?
>> Speaker 3: I have a question.
[00:02:08] Other structures besides functions that have curly brackets, like-
>> Bianca Gandolfo: Mm-hm, like blocks.
>> Speaker 3: Like whiles and fors. Do they create their own Scope?
>> Bianca Gandolfo: Not in JavaScript.
>> Speaker 3: Only functions?
>> Bianca Gandolfo: Only functions. Mm-hm.
>> Bianca Gandolfo: So, we have this thing called local scope. And this is how we create a scope in JavaScript, is by wrapping it in a function.
[00:02:33] And this is the only way that we can create a scope, is by saying var Name inside of a function body. So, if, for example, we console.log(local) out here, this would be outside of that scope, and that would give us an error because there's no local variable there.
[00:02:53] And this is also, do you have a question?
>> Speaker 4: Question is, if you declare a named variable as the function versus a function and the name is it the same thing?
>> Bianca Gandolfo: What's the difference?
>> Speaker 4: Yeah.
>> Bianca Gandolfo: It's basically the same thing. So the question is, what's the difference between naming a function like this or like this?
[00:03:26]
>> Bianca Gandolfo: The difference is that this function name here is gonna be hoisted to the top of the scope and that you can refer to this function, the whole function body, everything, it'll be hoisted to the top. Whereas if you store it in a variable, it will follow variable hoisting rules.
[00:03:47] We're not gonna get into hoisting today. It's kind of like a
>> Bianca Gandolfo: I don't know. It's something that happens in JavaScript. That's sort of like extra points if you know it, but if you just follow the general rules, you shouldn't have to worry about it. But in general I would recommend to store it in a function, I'm sorry, to store it in a variable rather than just creating a named function.
[00:04:15]
>> Speaker 5: If you take the VAR off of that second line
>> Bianca Gandolfo: Uh-huh.
>> Speaker 5: Then will the console log work?
>> Bianca Gandolfo: That's my next slide. So good. You're a step ahead.
>> Speaker 5: Sorry.
>> Bianca Gandolfo: No worries. So this is a private variable and our locals is in the local scope.
[00:04:32] And then we have something else that's called global scope. So global variables can be accessed anywhere in your application. This could be dangerous if you have naming collisions. You might not know which one wins, and then you could have unexpected results. So, in general, you want to avoid putting things in the global scope.
[00:04:50] So one way to create something in the global scope is to simply, outside of a function, say var x = global. Or even if it's inside of a function, what you could do is you could leave the var off. This would still work, it just automatically makes that variable part of the global scope.
[00:05:11] So, make sure that you do have those vars.
>> Speaker 6: Now, the indentation there is not relevant in JavaScript?
>> Bianca Gandolfo: No. A white space doesn't matter.
>> Speaker 6: Okay.
>> Bianca Gandolfo: Mm-hm. And another thing that's kind of a hack is that you could put it on the window object. So all global variables are located on the window object.
[00:05:31] So you could say, window.y, at least in the browser. So in browser land, every global variable is attached to the window object. So this wouldn't be true in different other environments like node or if you're programming like a TESL or something, the different, the environment depends on this but in the browser window is where all of our globals live.
[00:05:55] Mm-hm?
>> Speaker 7: So that z = global here tool, that's global because you didn't use the var?
>> Bianca Gandolfo: Yes. Any other questions?
>> Speaker 7: And I could access x, or z, with window.x or z later on?
>> Bianca Gandolfo: Yes. Yep.