Local And Global Variables In JavaScript

I have seen a lot of this sort of thing, so though I would put together a quick lesson in JavaScript variable scope. There are some important differences between local and global variables in JavaScript that will cause grey hairs if you don't know what's going on.

Scope is something that dictates what variables can be seen by code. If a variable is created inside a function then it can be said to be local as only the locally running code can see it. A variable that can be accessed by any part of the code is said to be global. This is special in JavaScript, which I will come onto later.

This scope concept is important as if a variable is outside the current scope then the code can't see it. Everything in JavaScript is a variable so understanding how and when variables can be accessed is important.

To create a local variable in JavaScript do this:

<script type="text/javascript">
var variable;
</script>

One thing to note here is that if you create the variable in the global space (i.e. outside of a function scope) then it will be global. If this code is run inside a function then the variable created will be local to that function.

To create a global variable in JavaScript do this:

<script type="text/javascript">
variable;
</script>

This variable will always be global, no matter where it is created.

The massively important thing here is that when JavaScript encounters a global variable declaration it will traverse up the Browser Object Model (BOM) tree to see if any variables with the same name have been set. If they have then it overrides that variable with the one defined here. This happens even if the variable is defined in this way within the scope of a function.

Give it a go by running the following:

<script type="text/javascript">
// Create a global variable.
var variable = 1;

var runMe1 = function() {
  console.log('runMe1');
  console.log(variable); // prints 1
  // Alter the global variable.
  variable = 2;
  console.log(variable); // prints 2
}

var runMe2 = function() {
  console.log('runMe2');
  console.log(variable); // prints undefined
  // Create and set a local variable.
  var variable = 1;
  console.log(variable); // prints 1
}

runMe1();
runMe2();
console.log('root');
console.log(variable); // prints 2

</script>

One thing that you might find strange when running this code was the first attempt to print out the 'variable' variable in runMe2() produces an 'undefined' response. However, this does make sense. This happens because JavaScript knows that the variable will be created later on in this function and so will not bring through the global scoped variable of the same name.

So why is this important? Suppose you included a framework or third part script that had a variable called 'a'. This might seem far fetched, but this sort of thing is quite common in the world of JavaScript minification and closure compilers. Everything will work fine until you try to define a global variable within your own code called 'a' and assign it a value that changes how the included code works. This sort of problem is really, really difficult to track down, especially in minified code. If you create a local variable called 'a' then this will have local scope (i.e. within the current function call) and will not clobber the global variable.

So, bottom line? It's good practice to define your variables local (as in 'var variable;') so that they don't clobber anything else within the scope. Doing this as a matter of course prevents any future code breaks from global variables.