javascript variable scope confuses me

Question

i have seen this below link and answer but i am confused....

javsacript variable scopes

var color = "black";
var r = function (x, y) {
    if(y == 1){
        var color = "red"; //refers to local color, here color points to red color in memory
    } else {
        console.log('inside else block');
        color = "red color";//refers to global color, here color points to red color in memory
    }
    //var color = "red color"; //refers to local color, here color points to red color in memory
    //color = "red";//refers to global color, here color points to red color in memory
    if (x > 2 ){
        return x*2;
    } else {

        return x * x;
    }
}
r(5, 2);
console.log(color);

but the output is black instead of red color which i expected....since inside the else block it is referring to the global variable right?

without the if block in there i get red , as expected (see below code).... if it is only function scope then how does the value change in the above scenario?

var color = "black";
var r = function (x, y) {

    //var color = "red color"; //refers to local color, here color points to red color in memory
    color = "red";//refers to global color, here color points to red color in memory
    if (x > 2 ){
        return x*2;
    } else {

        return x * x;
    }
}
r(5, 2);
console.log(color);

From msdn,

JavaScript does not support block scope (in which a set of braces {. . .} defines a new scope), except in the special case of block-scoped variables

Answer 1

but the output is black instead of red color which i expected....since inside the else block it is referring to the global variable right?

No. var declares a variable in the scope of the current function, not the block, and it is hoisted so it doesn't matter where in the function you put it.

You can't conditionally apply var.

Answer 2

As you declared color = "red" with 'var' keyword, this will create a new variable 'color' only in that scope (function r) which will override the variable color only in that scope (function r).

When you call console.log (in global or window scope) you refer to the variable color declared by var keyword in that scope.

"...since inside the else block it is referring to the global variable right?"

No, all the variables are initialized (hoisted) on the function start. So here also you are referring to the same variable color.

Simple rule use 'var' to define a new variable (overriding the outer scope) in a scope, and assume all your 'var' statements declaration (not assignment) are moved to the start of a function (scope).

i.e. your code is equivalent to :

 window.color = "black"; // assuming this is inside <script> tag directly
var r = function (x, y) {
    var color; // it is your local 'color'
    if(y == 1){
        color = "red"; //refers to local color, here color points to red color in memory "YES"
    } else {
        console.log('inside else block');
        color = "red color";//NOT refers to global color, here color points to red color in memory
    }

    if (x > 2 ){
        return x*2;
    } else {

        return x * x;
    }
}
r(5, 2);
console.log(window.color); // the window scope.

You are assuming it the java way — {} encloses a scope. For javascript: function(){} encloses a scope. not "if" and every scope has access to the variables in outer scope.

Answer 3

but the output is black instead of red color

That is because inside the block (which is inside a function) color was assigned a new reference with value red color which got garbage collected as soon as scope of the enclosing function ended.

Javascript variables are function-scoped, and a new reference assigned inside a function is relevant only till the scope of function lasts.

outside the function, older reference and its value black was retained.

Update

As per your comment,

it goes inside the else block and then i do no use var but just color so it should refer to global color right?

No, variable gets hoisted before the function starts getting executed so it doesn't matter if the if condition is executed or not.