Why my global variable is not accessible within a function? [duplicate]

Question

I thought that myColor would be accessible from sayColor() local context but it isn't even though I'm declaring myColor after the first alert. Why?

var myColor = "blue";
function sayColor() {
    alert(myColor); //undefined expected blue
    var myColor = "green";
    alert(myColor); //green
}
sayColor();

Answer 1

What's going on here is called "hoisting". Variable declarations that use var and function statements are "hoisted" to the top of their containing scope. (Note that, from ES6 on, let and const have different semantics.) So, to the browser's mind, your code actually looks like this:

var myColor = "blue";
function sayColor() {
    var myColor;
    alert(myColor); //undefined expected blue
    myColor = "green";
    alert(myColor); //green
}
sayColor();

From MDN:

Every definition of a variable is really a declaration of the variable at the top of its scope and an assignment at the place where the definition is.