Global variable in function not updating

Question

I write this simple program to update value of JS hoisting. But as per my understanding global x need to update, but It is not updating.

x = 5;
var w = function(){
    x = 7
    var x;
    console.log(x);
    x = 10;
    console.log(x);
};
w();
console.log(x);

Output:

• 7
• 10
• 5

Could anyone explain in more details why it did not update global x ?

Javascript work on reference of values so when I write x = 7, it should be update the global x. But it din't! So I just want to why x =7 doesn't work ?

Thanks!

Answer 1

The moment you declared a variable inside your function, it masked the global variable due to the way scoping rules work from inner to outer. So, function level var x variable is found first and not the global one that you expected.

JS converted your function from :

function(){
    x = 7
    var x;
    console.log(x);
    x = 10;
    console.log(x);
}

to this:

function(){
    var x;
    x = 7
    //var x;
    console.log(x);
    x = 10;
    console.log(x);
}

To your question about updating x = 7 and then declaring var x, let me explain it a bit more. Javascript code is not just executed, there is a compilation phase too. In this phase var declarations are looked inside the function(apart from so many other things that happen but I am just sticking to the question at hand). If found, they are moved at the top of the function. This is called hoisting. At this time you can think that your code has been modified by JS(order of var declaration and assignment doesn't matter now). If you just think of code being interpreted then order matters but as I said, due to compilation phase the hoisting occurs and not thinking in these terms causes the confusion you have. Once you look at it from compilation, hoisting angle, things look clearer.

Hope it helps! For further study, please read/listen Kyle Simpson who is authority on javascript.

Answer 2

Because you redeclared x in your function's local scope. That's the one you assigned 10 to, instead of the global one.

Ditch the var x; and it will work.

x = 5;
var w = function(){
    x = 7
    // var x;
    console.log(x);
    x = 10;
    console.log(x);
};
w();
console.log(x);

That being said, what's probably baffling you is hoisting

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

x = 5;
var w = function(){
    x = 7
    var x; // this is moved to the top of the local scope
    console.log(x);
    x = 10;
    console.log(x);
};
w();
console.log(x);

Answer 3

Always remember , local variable has highest precedence over any other and also please use proper naming conventions for the global and local variables thus preventing you from causing this kind of errors. They are very hard to be detected in huge project.