Introduction To Scope

Open the project folder

What is scope?

An important, but often confusing part of JavaScript is the concept scope. Scope at it's most basic is a way to place variables into groups. And each group allows a certain amount of access.

This means we can keep some control over what has access to our variables. This makes sense because variables hold our important data, so why would we want them to be changed or accessed when they don’t need to be?

Global scope

This lesson has the follwing code inside the index.html file:

var score = 0;

function updateScore() {
  score++;
  console.log(score); // 1
}
updateScore();

Here we have a simple example, we declare a variable called score, and a function to update the score and log it to the console.

This works because score is declared at the top level of our program. This does not mean it has to be physically placed at the top, it just means it's not nested or declared inside of something else, like our function.

This means it's in the global scope. It is globally accessible.

Function scope

Consider the following situation. We decide to add a bonus of 10 points to the score, this variable is created inside of the function, and logged to the console:

var score = 0;

function updateScore() {
  score++;
  var bonus = 10;
  console.log(score + bonus);
}
updateScore();

Again, no problems here, the console will show a value of 11. The problems begin when we try to access this bonus variable outside the function:

var score = 0;

function updateScore() {
  score++;
  var bonus = 10;
  console.log(score + bonus);
}
updateScore();
console.log(bonus); // access the bonus var outside the function

This will cause an error in the console:

⚠️ Uncaught ReferenceError: bonus is not defined

We know bonus is defined, but it is not accessible because of scope.

This goes back to the groups variables are placed into. Since the bonus variable is created inside of the function, unlike score, access is restricted to this function. This function has it's own scope. And this is useful for variables we know we don’t need to use elsewhere. It gives us the safety of knowing other sections of our code cannot modify the values.

This function scope also means we could create variables with the same names, but inside of different functions, if we needed too, and they would be independent.

Other considerations

As we know with JavaScript, it is often not that simple. There are a few other things we need to understand.

The access level of a variable depends on multiple factors. As we just seen, the location in our program where we declare it. Also, the type of variable we create has an effect. We have the options of var, const, and let. We will look at this in more detail during this section.

Testing in the console

We can also see the access level in the browser console.

Remove the following line to remove any errors: console.log(bonus);

Open the browser and test the following inside the console:

• Type score into console: this will work because it is global.
• Type bonus into console: this will not work because it is scoped to the function.

Block statement access

And along with functions, global variables are also available in other block statements. Block statements are sections wrapped in curly braces such as while, for, and if:

var score = 0;

function updateScore() {
  score++;
  var bonus = 10;
  console.log(score + bonus);
}
updateScore();

// score variable is accessible inside if statement
if (score) {
  console.log(score);
}

Recap

To recap, JavaScript has the concept of scope to allow us to set a variables access level.

Like the above example, score is declared at the top level of our code, meaning it has global scope. Global variables can be accessed anywhere, including inside of other code blocks wrapped in curly braces, such as functions and if statements.

The opposite is true when we declare a variable inside of a function using var. This has function scope and will not be available outside of this code block, therefore protecting the variable from being updated, or removed elsewhere.