Why does the second function declare a win, although I return earlier?

Question

I have the following JavaScript code:

(function() { function f(){ alert(1); } return f(); function f(){ alert(2); } })(); 

Can you explain why the warning appears with 2, not 1?

Thanks,

Answer 1

This affects what happens when execution introduces a function. Leaving a lot of detail, all function declarations (the style that you used) are processed, and only after that does the step-by-step code execution take place. Therefore, your return does not affect which function is declared. And the chosen declaration is always the last in the source code (this is covered - in the marvelous turgid prose - in Section 10.5 of the specification).

The result will be fundamentally different if you use function expressions that are evaluated as part of a step-by-step code:

 (function() { var f; f = function(){ alert(1); }; return f(); f = function(){ alert(2); }; })(); 

This code is technically incorrect (because you have code following return that will always execute), but it illustrates the difference: you see alert(1) , not alert(2) , because these expressions are not evaluated before those until they are achieved.

You can learn more about what happens when execution enters a function (declarations are not the only ones executed before the first step-by-step code) in sections 10.4.3 and 10.5 of the specification.

---

And with your new knowledge, quiz: what is happening here? (Note: Never do this.)

 function foo() { if (true) { function bar() { alert(1); } } else { function bar() { alert(2); } } bar(); } foo(); 

Answer: He is changing, do not do this. Some engines will use the first bar , other engines will use the second, and others will cause it with a syntax error. This is due to the fact that there is actually a mistake, and therefore the engines can do what they consider the best. If you look closely at the grammar of the language, you will see that it is not valid to place function declarations inside branches within their immediate contents. They should be at the top level of this sphere. With a new understanding of declarations, the reason should be obvious: they are not related to the flow of execution within the scope, and therefore, naturally, you cannot select them based on this flow of execution.

So what is going on in the real world? Unfortunately, this is usually not a mistake if you are in "free" mode (not strictly). Some engines (e.g. Chrome V8, at the time of this writing) will ignore the flow control statements and simply select the last declared function (and therefore you will get a counter-intuitive result that the second bar function is used), other engines (Firefox SpiderMonkey, IE11 JScript ) effectively rewrite your code on the fly, turning these declarations into expressions instead, and so you get the first bar . For example, it depends on the engine. The good news is that if you try this in strict mode, all three of them (V8, SpiderMonkey and IE11 JScript) fail, and not picking one (V8 and SpiderMonkey with good clear error messages in the console; JScript with an amazing " bar - undefined ", but ...).

If you want to do something similar above but are valid and consistent across machines, use expressions:

 function foo() { var bar; if (true) { bar = function() { alert(1); }; } else { bar = function() { alert(2); }; } bar(); } foo(); 

There's an interesting study of this subject on the kangax Named Function Expressions of the Demystified page .

Answer 2

There is something called “lifting” - this is a consequence of the process of allowing activation of an area / function (without going into too detailed details).

This means that when you enter the scope of the variable and function declarations, they are processed and saved as if they were made at the beginning of the scope. Parts of the destination remain where they are.

So the following code:

 function() { console.log(a) var a = 5; } 

will print "undefined", and this is because just putting it equivalently:

 function() { var a; console.log(a) a = 5; } 

In your example - it is important to remember - these are ads - therefore they are processed like any variable, but since they "contain" the body of the function, then the whole declaration (including the equivalent of a = 5 ) is "raised".

At this stage of variable processing - if a variable with the same name has already been processed - this value and attributes are replaced.

So your code is equivalent:

 (function() { function f(){ alert(2); } return f(); })(); 

Answer 3

Since the body of an anonymous function is not procedural, as you might expect.

Rather, it is an object with properties. And you are allowed direct links, that is, the code in one function can refer to properties defined later in the object.

Since you have duplicate definitions of the same property, the latter takes precedence, effectively rewriting the former. So your snippet is equivalent (removing the first, overridden definition):

 (function() { return f(); function f(){ alert(2); } })(); 

and at this moment it will not come as a surprise to you that the message contains 2 .

Answer 4

Since the code is parsed first, the function f () is guaranteed how it is executed, and the last function f () is called.