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

/ :

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 e for this code snippet, global variable 'a' evaluates to be 10 and not 5? It's as if the a = 5 never happened.

/ :

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?

​

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

http://jsfiddle/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 e 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/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?

​

• javascript

• Wow, I think your question has been answered ;) – mplungjan Commented Jul 9, 2012 at 14:37
• Does this answer your question? Why does JavaScript hoist variables? – dumbass Commented Jun 25, 2024 at 4:15

6 Answers 6

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./2010/2/JavaScript-Scoping-and-Hoisting

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.

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

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; }
}

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

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.