Why can variable declarations always overwrite function declarations?

Question

No matter whether I define the function after the variable

var a = 1;
function a() {};
typeof a // number

Or if I define the function before the variable

function a() {};
var a = 1;
typeof a // number

the final typeof result is always number

I found some explanation about execution context in http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/

Before executing the function code, create the execution context.
......
Scan the context for variable declarations:
If the variable name already exists in the variable object, do nothing and continue scanning.

but this does not seem to work.

So how can I explain it?

Answer 1

It's to do with JavaScript's variable hoisting. Try this instead:

var a = 1;
var a = function() {};
typeof a // function

Answer 2

You're implicitly declaring the variable multiple times by using the function statement 'function a() {};', which as noted by others hoists the variable and behaves unexpectedly due to the order that the browser registers the declarations.

Behind the scenes, this statement instantiates a function object and assigns the result to the variable passed as the function name (reference) but this is done before the explicit var declarations are performed, and so that overrides the implicit declaration. If you just do the following, it will work more intuitively:

var a = 1;
a = function(){};
console.log(typeof a);  // function

This is a better option than the multiple var declaration in the other answer from a logical standpoint because (even though you can), it's not a good practice to declare the variable multiple times anyway.

To specifically answer the 'why' for this question: it's so that you can use these kinds of statements to define functions and use them in your explicit declarations, as in

var a = someFunction();  
function someFunction(){ return 'someVal'; }

If the function statements weren't parsed and hoisted first, this wouldn't be possible.