Why function declarations are always moved to top during evaluation?

This isn't actually a specific issue I have but something I'd like to educate myself on:

As far as I understand, in JavaScript the following code

if (true) {
    function greet(){ alert("Hello!"); }
} else {
    function greet(){ alert("Hi!"); }
} 
greet();

outputs Hi! because the code is actually evaluated as something like this:

greet = function(){ alert("Hello!"); }
greet = function(){ alert("Hi!"); }

if(true){
    // possib开发者_开发百科ly a no-op assignment, such as greet = greet?
}else{
    // same as the other branch?
} 
greet();

From a language design perspective, why does JavaScript behave in this way?

Named functions are created before the code starts, so that you don't have to put the declaration of a function before the code that uses it:

x(); // this is possible because the function already exists

function x() {}

It doesn't matter where the function declaration is, even if it's inside a flow control structure, it's still created before the code starts. So, there is no executable code at all inside the if statement in your example, not even a no-op assignment.

If you want to assign function declarations dynamically, you have use a variable:

var greet;
if (true) {
  greet = function(){ alert("Hello!"); }
} else {
  greet = function(){ alert("Hi!"); }
} 
greet();

You don't have to use anonymous functions though, you could assign one of two named functions to the variable.

You may have found a quirk of the language and if you look a bit further you will also find different implementations.

ECMAScript processing has two phases - in the first, all declarations are processed to create named properties within the scope of their declaration. In the second, the code is executed. So declared functions and variables are available in their declared scope from the start of execution, regardless of where in the code they are declared.

And those that are created or assigned values by assignment will have values only when the assignment code is executed.

So:

// Call x
x();

// Declare x
function x(){}

works without error. This is colloquially called "hoisting", meaning declarations are "hoisted" to the top of the scope.

However, to paraphrase your example:

if (true) {
    function x(){
        alert('true x');
    }
} else {
    function x(){
        alert('false x');
    }
}

// In most browsers
x(); // false x

// But in Firefox
x(); // true x

For most browsers, the second declaration overrides the first. That is because ECMAScript does not have block scope, only function and global scope.

However, in this case extensions are allowed to the language. Firefox treats the above as named function expressions, hence is shows true x. More importantly, because other browsers treat the expressions as declarations, x can be called from above the code block but in Firefox it can't, you'll get an error.

The bottom line is if you want to conditionally assign a function to a named parameter or variable, do it explicitly like:

var x;
if (true) {
    x = function (){
          alert('true x');
        };
} else {
    x = function (){
            alert('false x');
        };
}

so that you get consistent behaviour. And you must also remember that x will not be a function until after the code has been executed, it will not be "hoisted" because it isn't a declaration.

First, it does not always behave in this way. In the case of Function Expressions function object is only available in the internal scope.

Second, when you define a function it is very likely that you want to use it in the current scope. So it is very natural that it will become available in the current scope. Consider that the enclosing scope (depending on the function definition location) is the global object or the enclosing function body not the if block.

Now, I can reduce your question to the following question:

• Why the function name is used as the variable name?

  A : Otherwise developers have to always assign function to a variable (which I prefer).