You may know that functions have function promotion, or you may know that functions have block-level scope, but that doesn’t necessarily mean that what you know is true. If you don’t believe me, keep reading.

First I’m going to give you a procedure

console.log(fn);
fn();
{
    fn();
    function fn() {
        console.log(10);
    }
    fn();
}
fn();
Copy the code

Now imagine in your mind the output of each position.

Here are the answers

console.log(fn); // undefined
fn(); Fn is not a function
{
    fn(); / / 10
    function fn() {
        console.log(10);
    }
    fn(); / / 10
}
fn(); / / 10
Copy the code

If your answer is exactly the same as Google chrome’s, there’s no point in reading this article. Instead, read this article carefully.

Here is the body

Because ES5 and ES6 have huge differences in function promotion and block-level scope, I’m using ES6 as the standard here.

Step 1: We need to understand what block-level scope is, what var promotion is, and what let temporary dead zones are.

If you don’t know any of the three points above, please move on to my post and read the first “part”

Summary of new features of ES6

Step 2: Remember these three sentences (the ES6 standard that browsers follow)

  • Allows functions to be declared in block-level scope
  • A function declaration (in this case, the function name) is similar to var, that is, it is promoted to the head of the global scope or the function scope
  • Also, the function declaration (in this case, the function as a whole) is promoted to the head of its block-level scope

Step 3: Go back to the original program

Take another look at the original program:

console.log(fn);
fn();
{
    fn();
    function fn() {
        console.log(10);
    }
    fn();
}
fn();
Copy the code

Since function declarations are similar to var, the program will look like this:

var fn; // According to the second sentence, it is promoted here
console.log(fn);
fn();
{
    fn();
    fn = function() {
        console.log(10);
    }
    fn();
}
fn();
Copy the code

Based on the third sentence, the program would look something like this:

var fn; // According to the second sentence, it is promoted here
console.log(fn);
fn();
{
    fn = function() { // According to the third sentence, it is promoted here
        console.log(10);
    }
    fn();
    fn();
}
fn();
Copy the code

So, the result of the program will be:

var fn; // According to the second sentence, it is promoted here
console.log(fn); // undefined
fn(); Fn is not a function
{
    fn = function() { // According to the third sentence, it is promoted here
        console.log(10);
    }
    fn(); / / 10
    fn(); / / 10
}
fn(); / / 10
Copy the code

Back to the result of the original program:

console.log(fn); // undefined
fn(); Fn is not a function
{
    fn(); / / 10
    function fn() {
        console.log(10);
    }
    fn(); / / 10
}
fn(); / / 10
Copy the code

Is it exactly the same?

Finally, a word of caution

All I’ve been talking about is: function declaration + browser environment

That is, function XXX () {} is a function declaration. Var XXX = function() {} The former uses the logic of this paper to consider function promotion and function block level scope; The latter is equivalent to the promotion of variables and the block-level scope of variables.

If you switch to a Node environment in strict mode, the ES6 standard is strictly followed: function declarations are similar to lets.

With it you

Feel useful remember to leave like!