Puzzled by this JavaScript code snippet

Question

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 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?

Does this answer your question? Why does JavaScript hoist variables? — dumbass
– dumbass, Commented Jun 25, 2024 at 4:15

Graham · Accepted Answer · 2012-07-09 14:32:46Z

11

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

answered Jul 9, 2012 at 14:32

Graham

6,5822 gold badges39 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ZER0 · Accepted Answer · 2012-07-09 14:43:29Z

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.

answered Jul 9, 2012 at 14:43

ZER0

25.5k5 gold badges53 silver badges57 bronze badges

1 Comment

Tim Down Over a year ago

+1 for the example and bothering to explain what hoisting means.

gen_Eric · Accepted Answer · 2012-07-09 14:33:14Z

1

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

answered Jul 9, 2012 at 14:33

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Comments

Mitya · Accepted Answer · 2012-07-09 14:32:54Z

0

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

answered Jul 9, 2012 at 14:32

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

Comments

Naftali · Accepted Answer · 2012-07-09 14:33:13Z

0

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

answered Jul 9, 2012 at 14:33

Naftali

147k41 gold badges247 silver badges304 bronze badges

Comments

millimoose · Accepted Answer · 2012-07-09 14:33:30Z

0

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.

answered Jul 9, 2012 at 14:33

millimoose

40.1k11 gold badges89 silver badges138 bronze badges

Collectives™ on Stack Overflow

Puzzled by this JavaScript code snippet

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related