This is what the concept of 'hoisting' is about in Javascript. Anything can be used before the declaration of it (but limited to the scope within which it's declared).
JS brings all the declarations to the beginning of the block as part of interpretation. That's how the local variable inside the function is shadowing the one defined in the global scope. Since JS can hoist only declarations and not initializations, the value of the variable in the function scope is 'undefined' when it was accessed in the first alert.