Understanding Local versus Global JavaScript Variables

There's a big difference between JavaScript variables declared outside of functions and those declared inside of functions. The following information explains this crucial difference.

In programming, the scope of a variable defines where in the script a variable can be used and where it can’t be used. To put it another way, a variable’s scope determines which statements and functions can access and work with the variable. There are two main reasons you need to be concerned with scope:

• You might want to use the same variable name in multiple functions. If these variables are otherwise unrelated, you’ll want to make sure that there is no confusion about which variable you’re working with. In other words, you’ll want to restrict the scope of each variable to the function in which it is declared.
• You might need to use the same variable in multiple functions. For example, your function might use a variable to store the results of a calculation, and other functions might also need to use that result. In this case, you’ll want to set up the scope of the variable so that it’s accessible to multiple functions.

JavaScript lets you establish two types of scope for your variables:

• Local (or function-level) scope
• Global (or page-level) scope

Working with local scope in JavaScript

When a variable has local scope, it means the variable was declared inside a function and the only statements that can access the variable are the ones in that same function. (That’s why local scope also is referred to as function-level scope.) Statements outside the function and statements in other functions can’t access the local variable.

To demonstrate this, consider the following code:

function A() {
  var myMessage;
  myMessage = "I’m in the scope!";
  console.log("Function A: " + myMessage);
}
function B() {
  console.log("Function B: " + myMessage);
}
A();
B();

There are two functions here, named A() and B(). Function A() declares a variable named myMessage, sets its value to a text string, and uses JavaScript's console.log() method to display the string in the console.

Function B() also uses console.log() to attempt to display the myMessage variable. However, JavaScript generates an error that says myMessage is not defined. Why? Because the scope of the myMessage variable extends only to function A(); function B() can't “see” the myMessage variable, so it has nothing to display. In fact, after function A() finishes executing, JavaScript removes the myMessage variable from memory entirely, so that's why the myMessage variable referred to in function B() is undefined.

The same result occurs if you attempt to use the myMessage variable outside of any function, as in the following code:

function A() {
  var myMessage;
  myMessage = "I’m i the scope!";
  console.log("Function A: " + myMessage);
}
A();
// The following statement generates an error:
console.log(myMessage);

// The following statement generates an error:

console.log(myMessage);

Working with global scope in JavaScript

What if you want to use the same variable in multiple functions or even in multiple script blocks within the same page? In that case, you need to use global scope, which makes a variable accessible to any statement or function on a page. (That's why global scope is also called page-level scope.) To set up a variable with global scope, declare it outside any function. The following code gives this a whirl:

var myMessage = "I’ve got global scope!";
function C() {
  console.log("Function C: " + myMessage);
}
C();
console.log("Outside the function: " + myMessage);

The script begins by declaring the myMessage variable and setting it equal to a string literal. Then a function named C() is created and it displays a console message that attempts to display the value of myMessage. After the function is called, another console.log() statement attempts to display the myMessage value outside of the function. As you can see, both console.log() statements display the value of myMessage without a problem.