In this lesson, you will learn about JavaScript scope, including how to use JavaScript scope and common sources of software bugs caused by misunderstanding this important JavaScript concept.

Table of Contents

You can skip to any specific section of this JavaScript tutorial using the table of contents below:

• What is JavaScript Scope?
• Global Variables
• Function Scope
• JavaScript Block Scope
• Why You Should Not Use Global Scope in Your JavaScript Applications
• Final Thoughts

What is JavaScript Scope?

In JavaScript, scope allows you to understand where variables and functions are made available to you.

There are many types of scope in JavaScript and understanding each of them is important. We will work through the different scope types one-by-one during the rest of this tutorial.

Global Variables

The most basic type of scope in JavaScript is global variables.

These are variables that are declared in the root of your JavaScript file (or in the root of your web browser's console). They are accessible anywhere within the JavaScript application, including within functions, loops, and objects.

So far in this course, we have worked primarily with global variables, so you should be familiar with these data types. Here are a few examples of global variables as a quick refresher:

const country = 'Canada';

var capital = 'Ottawa';

let population = 33000000

Function Scope

Function scope refers to variables that are only available within a JavaScript function.

Understanding function scope is sometimes difficult to understand without an example, so let's start by looking at the following code block:

function exampleScope(){

    const functionScopedVariable = 15;

    console.log('The function has run')

};

What do you think happens when we try to use the functionScopedVariable outside of the function block? For example, what happens if we run the following statement:

console.log(functionScopedVariable)

Your browser will print the following error message:

Uncaught ReferenceError: functionScopedVariable is not defined

    at <anonymous>:1:1

This also happens if we actually run the function before trying to reference the variable inside of it. Specifically, if we run the following code:

exampleScope()

console.log(functionScopedVariable)

Then we still get the following error:

Uncaught ReferenceError: functionScopedVariable is not defined

    at <anonymous>:1:1

This is because functionScopedVariable is "function scoped", which means that its scope restricts it to only be accessible within the function. Said differently, any variables created within a function's curly brackets can only be accessed from within those brackets.

The opposite is not true, however. JavaScript functions have access to all global variables within the application.

Consider the following function, calculateSalesTax (from our earlier lesson on JavaScript functions), as an example:

const taxRate = 0.15

function calculateSalesTax(price){

	return price*taxRate;

};

const price = 100;

calculateSalesTax(price);

//Returns 15

What happens if there was another taxRate variable declared within the function block? For example, what do you think the output of the following modified code block is:

const taxRate = 0.15

function calculateSalesTax(price){

	

	const taxRate = 0.30;

	

	return price*taxRate;

};

const price = 100;

calculateSalesTax(price);

This code returns 30. This is because a function will always look for a local, function-scoped variable before moving outside the function to search for a global variable with the same name.

Note that while this code technically works, it is a horrible practice because using the same variable name both inside and outside of a function block makes it impossible to access the variable outside of the function block.

In this case, having the const taxRate = 0.30 inside the function block prevents us from ever being able to access the globally-scope const taxRate = 0.15 variable.

JavaScript Block Scope

As we learned earlier in this course, JavaScript provides three keywords that you can use to create variables: var, let, and const. We also learned that each keyword has slightly different properties. These properties have to do with scope, and it's time for us to discuss them.

First, consider the following JavaScript code:

if ('Yes' === 'Yes'){

	var var1 = 1;

	let var2  = 2;

	const var3 = 3;

}

Let's try and access each of these three variables outside of the if statement:

console.log(var1);

This returns:

1

Next:

console.log(var2);

This returns:

Uncaught ReferenceError: var2 is not defined

    at <anonymous>:1:13

Next:

console.log(var3);

This returns:

Uncaught ReferenceError: var3 is not defined

    at <anonymous>:1:13

What is happening here?

Well, a set of curly brackets in JavaScript is called a "block". if statements are by far the most common source of code blocks in JavaScript. As we've just seen, the different variable declaration keywords have different behavior in terms of how they can be accessed outside of a block.

As you can see, the var keyword allows you to access variables outside of the block where they were declared. The const and let keywords do not.

This is the main reason why most developers prefer to use const and let over var - the var keyword allows your variables to leak outside of the code blocks where they were declared, which can introduce bugs into your code later on.

You might be wondering - what if you run into a situation where you want to access the const or let variables outside of the block?

For the const keyword, there is no workaround for this.

For the let keyword, however, there is a solution. You can declare the variable outside of the code block and then update its value within the block.

Consider the following example to see this in action:

let var1;

if ('Yes' === 'Yes'){

var1 = 1;

}

console.log(var1);

This code will print the value of var1 to the console, as intended.

Why You Should Not Use Global Scope in Your JavaScript Applications

In almost all situations, using global scope is a bad idea.

This is because global variables can introduce bugs into your code later on. Functions and code blocks can reach outside of themselves to search for variables, which can cause code to run successfully (but with unintended variables) even if a variable is missing from a function or code block.

Keep this in mind as you continue on your journey of JavaScript development.

Final Thoughts

In this tutorial, you learned how to understand function scope in JavaScript.

Here's a summary of what we discussed:

• What is JavaScript Scope?
• Global Variables
• Function Scope
• JavaScript Block Scope
• Why You Should Not Use Global Scope in Your JavaScript Applications