Puzzled by this JavaScript code snippet

Question

For this snippet, I'm not surprised global variable 'a' evaluates to be 5.

http://jsfiddle.net/MeiJsVa23/gZSxY/ :

var a = 10;

function func(){
  a = 5;
}

func();   // expect global variable 'a' to be modified to 5;

alert(a); // and this prints out 5 as expected. No surprise here.
​

But how come for this code snippet, global variable 'a' evaluates to be 10 and not 5? It's as if the a = 5 never happened.

http://jsfiddle.net/MeiJsVa23/2WZ7w/ :

var a = 10;

function func(){
  a = 5;
  var a = 23;
}

func();   // expect global variable 'a' to be modified to 5;

alert(a); // but this prints out 10!! why?

​

Answer 1

This is due to variable hoisting: anything defined with the var keyword gets 'hoisted' to the top of the current scope, creating a local variable a . See: http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

Answer 2

So, there are two things are going here: hoisting and shadowing .

Because the first one, variable declarations are "hoisted" to the top, so your code is equivalent to:

var a = 10;

function func(){
    var a;
    a = 5;
    a = 23;
}

And because the second one, you're "shadowed" the global variable a with a local ones, so the changes are not reflected to the global a .

Answer 3

This is called " variable hoisting ". var declarations (and function() declarations) are moved to the top of their scope.

Answer 4

This has to do with hoisting .

In the function, a local variable with the same name is declared. Even though it happens after your modification, it is deemed to have been declared before it - this is called hoisting.

Local variables hoist for declaration but not value. So:

function someFunc() {
    alert(localVar); //undefined
    var localVar = 5;
}

Functions, if declared with function name() {... syntax, hoist for both declaration and value.

function someFunc() {
    alert(someInnerFunc()); //5
    function someInnerFunc() { return 5; }
}

Answer 5

var a = 10;  //a is 10

function func(){
  a = 5; //a is 5
  var a = 23; // a is now in local scope (via hoisting) and is 23
}

func();   

alert(a); // prints global a = 10

Answer 6

Presumably, the statement var a = 23 creates a local variable for the whole scope . So the global a is shadowed for the entirety of func() , not just for the lines below the statement. So in your second snippet, a = 5 is assigning to the local variable declared below.