Javascript Scope

In this brief article, I will describe some of the details with regards to Scope in Javascript. Its a fundamental concept within this (and other) programming language and without this understanding wierd and not-so-wonderful things will occur within your amazing crafted software creations.

Variable Scope

Scope defines what is available for use in terms of objects, functions and variables. This is similar to to other programming languages however in Javascript, scope is controlled via functions rather than ‘code blocks’.

So you can either ask the question, "what is in scope?", or another way of looking at availability is by asking the question, "what is the scope of my variable?". The latter question could be asked again by “what is the context in which i can use my variable?”. In order to asnswer this question you must understand the concept of Local Variables and Global Variables, so lets start there.

Local Variables

As mentioned before, and worth mentioning again, because its so important, JavaScript has function level scope. Any variables you declare within a function are local variables and can only be accessed within that function.

function whatsTheMagicNumber() {
  var magicNumber = 12345; // magicNumber has been declared within function whatsTheMagicNumber so can only be used within this function
  console.log(magicNumber); // 12345
}
console.log(magicNumber); // bad stuff happens here

If the name of your local variable matches that of a global variable (we’ll come to this in a moment), the local variable will have priority.

Global Variables

Variables declared outside of a function are considered global and can be used outside and within your functions. If you declare a variable within a function but without the var keyword the variable becomes global too. This can cause all sorts of chaos if your think you are changing a local variable but actually modifying a global variable.

Note, global variables in the browser are those within the scope of the window object.

var magicNumber = 54321; // global magicNumber
function whatsTheMagicNumber() {
  var magicNumber = 12345; // local magicNumber
  console.log(magicNumber); // 12345
}
whatsTheMagicNumber();
console.log(magicNumber); // 54321

var magicNumber = 54321; // global magicNumber
function whatsTheMagicNumber() {
  magicNumber = 12345; // modifies the global magicNumber
  console.log(magicNumber); // 12345
}
whatsTheMagicNumber();
console.log(magicNumber); // 12345

Variable Hoisting

If you are gurus of other programming languages then the next statement might blow your mind, hold tight...it is possible to use a variable before it is declared. Ok, its not witchcraft, its the concept of hoisting that’s at play here and this behaviour is Javascript promoting variable declarations to the top of the scope. So if the variable is within a function then the variable declaration is hoisted to the top of the function.

To avoid the illution of witchcraft or unexpected behaviour, it is common practice to declare your variables at the top of the scope.

Careful now! You understand variable hoisting but please note that variable assignments are not hoisted so you be using a variable that has been hoisted but the value has not yet been assigned.

So the following function:

function DoSomething() {
  DoSomethingElse();
  var x = 1;
}

is the equivalent to:

function DoSomething() {
  var x;
  DoSomethingElse();
  x = 1;
}

Function expressions on the other hand behave differently, they are not hoisted at all.

var whatsTheMagicNumber = function() {
  console.log(12345);
}; // is not hoisted