6.3 Scope

Hello folks. In this lesson, we're going to take a look at scope in JavaScript, starting with what it actually is. Scope is actually a relatively simple concept and is a feature of many programming languages. Although JavaScript does have some subtleties, that can be confusing. Scope defines the visibility of variables in different places in our code. In any JavaScript environment, the global scope is the top level scope that contains all other scopes. Typically, the global scope in JavaScript is the window object, which represents the browser that has loaded the page in which the code is running. The global scope is visible to every single script file attached to the page. And this is why we should avoid setting variables in the global scope if it's at all possible. So to inspect the global window object, we can just enter window in the browser console. Any global variables that we create will automatically become properties of the global scope. And we can see that the global variable that we created has automatically been added to the window object. There are many properties of the global objects which are useful. For example, if we want to see the URL that is displayed in the browser's address bar, for example, we can use the location objects, which is a property of the global window objects. So we can see here, the location property contains a location object and that object has a href property which shows the value in the address bar. So I mentioned at the start of the lesson, that the global scope contains all other scopes. So how do we create new scopes? We can do this with either functions or blocks. We we declare a function in JavaScript, it automatically creates its own scope. When we declare variables inside a function, we say that the scope of those variables is local to the function that they're defined within. They are local variables instead of global variables. They're local to the function that they are within. Variables defined inside of functions cannot be accessed or updated outside of those functions. Let's see a quick example of this. We'll need to invoke our function of course. So we can see both of the variables from within the function. So we've got two functions in this example. We've got the immediately invoked function expression which surrounds the whole file. So when this file gets executed, what will happen is this outer wrapping function will create a scope. This scope will belong to the global scope. So inside the scope of the iffy function, the outer containing function, we then define a function called local. And inside this local function, we create a new variable called localvar. When we do the console log, we see that we can log both the myVar, which is part of the IIFE's scope. And the localvar, which is a part of the local scope. So the local scope is actually within the IIFE scope, the IIFE scope itself is within the global scope. Inside of the local function then, we can see any variables that are defined within the function itself. So any variables that are local to the function, we can see all of those inside that function. But we can also see any variables which are in any scope, which the local function is also within. So the local function is within the IIFE function scope, where myVar is defined. And so we can see that both inside the local function and outside of the local function. However, we can't see the local variable outside of the local function In this case we get an error to say that localvar is not defined. Now we know that localvar is defined, but it's defined in the local functions scope. So, we can reach out of scopes like inside the local function, we can reach out to the containing scope to see the myVar variable. But we can't reach into a scope, we can reach into the local function scope in order to see the local variable from outside of the local function, that doesn't work. So all of these different scopes that get created are known as scope chains. So inside of the local function, we are at the end of a scope chain which included the local scope, the IIFE scope and the global scope. When we are in the IIFE scope, the scope chain just consists of the IIFE scope and the global scope. As well as function scope, JavaScript now also has block scope. Block scope enables the same behavior as function scope, but for blocks of code instead of functions. A block of code, remember, is any statements within curly braces. So we've created a block using a for in loop here. Let's run the code in a browser and see what happens. So you can see that we do see prop one in the console, but then we see an error to say that prop is not defined. So while we are inside the block of the for loop, we can access the prop variable. But because the prop variable was declared using the lets keyword, that makes the variable block scope, so it can only be seen within the block of the for loop. And when we try to access prop outside of the for loop, we see the error. If we change let to be var instead, we then don't see the error anymore, because the variable is no longer block scope. So actually now prop exists in the IIFE scope, because is its containing scope. So in this lesson we looked at scope in JavaScript and we saw that it can be defined as the area in which variables can be accessed in different parts of our code. We saw that variables defined in the global scope are visible everywhere, even in different script files running on the same page as our own. We also saw that functions create their own scope and that variables defined inside a function are only visible to other code within the same function. We also saw that blocks can create their own scope, as long as we use either the let or const keywords in order to declare variables. If we use the var keyword to declare a variable inside a block, that variable will leak out of the block and be visible in code outside of the block. In the next lesson, we’re going to move on to look at arrow functions. Thanks for watching.