JsLint 'out of scope' error

Question

function test(){
    if(true){
        var a = 5;
    }
    alert(a);
}

test();

I keep getting 'out of scope' errors in my JS code when I check with JsLint which make no sense to me.So I quickly created an example. Is there something actually wrong with this code piece, as the variable is eventually hoisted to the top of the function anyways.

Answer 1

While var localizes a variable to the function and is subject to hoisting, most languages have block scope and not function scope.

By using the var keyword inside an if block, but accessing the variable outside that block, you've created a construct that can be confusing to people not familiar with that JS idiosyncrasy.

Douglas Crockford recommends using a single var statement at the top of a function that specifies all the variables that should be scoped to that function.

function test(){
    var a;
    if(true){
        a = 5;
    }
    alert(a);
}

test();

With multiple variables you would have:

function foo () {
    var a, b, c, d = "only d has an initial value", e;
    // …
}

Answer 2

The code that you wrote is working. It is just not very readable/maintainable. Declaring the variable a inside the scope of the if may give the false impression that a is only visible inside this scope (which, as this program shows, is not true - a will be visible throughout the whole function).

This JsLint warning encourages you to place the declaration at the exact scope where the variable is actually used, as follows:

function test(){
  var a = null;
  if(true){
      a = 5;
  }
  alert(a);

}