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?

function a(){} will(should) always be hoisted before var in a scope.so the latest type of a is always number. That's why in "modern" javascript it's better to declare named functions as var a=function(){} — mpm
– mpm, Commented Jan 15, 2014 at 14:17

canon · Accepted Answer · 2014-01-15 14:23:01Z

5

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

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

edited Jan 15, 2014 at 14:23

canon

41.9k10 gold badges77 silver badges102 bronze badges

answered Jan 15, 2014 at 14:18

net.uk.sweet

12.4k3 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jtrick · Accepted Answer · 2014-01-15 15:26:34Z

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.

basilikum · Accepted Answer · 2014-01-15 15:26:58Z

As already mentioned, it has to do with the way JavaScript hoisting works. The main issue to notice is that JavaScript will hoist the complete function definition (along with the function body) up to the top, but keeps the variable initialization where it is (only the declaration is hoisted).

So if you write this:

var a = 1;
function a () {
}

it will be translated to:

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

and if you write this:

function a () {
}
var a = 1;

it will be translated to:

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

So no matter what you do, a = 1; will remain at the very bottom.

Please note that the above "translations" should be seen theoretically. JavaScript probably has a way to omit the var a; statement if there is already a function declaration with the same name. And there also might be a defined order (functions get hoisted before variables or the other way around). But all of this doesn't affect the outcome of the variable initialization being the only part that is NOT hoisted at all.

Collectives™ on Stack Overflow

Why can variable declarations always overwrite function declarations?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related