函数名称是否存储在IIFE中？

Question

It is my understanding that the grouping operator around a function declaration forces the function to be evaluated as an expression. This is what allows the execution parentheses operator () to work. However, this approach removes the function name from being accessible outside itself. I'm wondering how IIFE function names are stored compared to function declaration names which are available in the scope they are declared.

(function hidden(){
    console.log("function executed");
})()

Answer 1

There's a good article by Angus Croll about the difference between a function declaration and a function expression in javascript ( https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ )

Basically what you're trying to do is treat the function hidden() as a function declaration inside of a function expression. As Croll states in the article, inside a function expression, "the function name (if any) is not visible outside of it's scope (contrast with Function Declarations)."

If you rewrite the anonymous function as an assignment it makes the point clearer I think:

var a = function hidden() {
  console.log('inside hidden');
}

now this will error:

var a = function hidden() {
  console.log('inside hidden');
}
hidden();

because the name of the function is not available outside of its own context.

This however will work fine:

var a = function hidden() {
  console.log('inside hidden');
}
a();

since the variable can be referenced outside of its own context as you would expect (otherwise it wouldn't be reachable anywhere but inside the hidden() function body).

If we take a look again at the anonymous version you can see why it fails:

(function hidden() {
  console.log('inside hidden');
}
// We're outside of IIFEs function body here
// so NO code can be executed.
)();

Answer 2

Because it's simply a parsing/syntax error, as you said, "unexpected identifier" . You could fix this by using the comma operator: (function hidden() { ... }, hidden()) , but the hidden name (holding the function object) from your function expression will be only available inside the function scope. You could solve this by doing a definition instead:

(function() {
    function hidden(){
        console.log("hidden");
    }
    hidden();
})();

You could also do bound definitions. Like...

ES4 ( reference interpreter builds):

{
    let function hidden()
    {
        console.log("hidden");
    }
    hidden();
}

ES6-based JavaScript

{
    let hidden = function()
    {
        console.log("hidden");
    }
    hidden();
}

Answer 3

The name of a function is available by accessing the function's name property:

IIFE:

(function hidden() {
    console.log("Function name is: '" + hidden.name + "'"); //Function name is: 'hidden'
})();
console.log(hidden.name);//Error because IIFEs have their own private scope. 

function declaration:

function available(){
    return;
}
console.log(available.name);//"Available" - the console.log has access to the function's scope.

Answer 4

On the other hand the following is perfectly valid:

 (two = function() { console.log('two'); }, console.log('one'), two)() 

Answer 5

You have a syntax error because

(function hidden(){
    console.log("hidden");
}
hidden();)

is not an expression but

(function hidden(){
    console.log("hidden");
})

is an expression that returns the function itself and you call it with () .

You could make it an expression by adding a comma between the two parts, and removing the semi-colon. However, hidden would be only defined within the function itself and you couldn't call it. That's called a named function expression

// Uncaught ReferenceError: hidden is not defined
(function hidden(){
    console.log("hidden");
},
hidden())

You probably meant to do the following

(function() {
    function hidden(){
        console.log("hidden");
    }
    hidden();
})()

In that case, you are creating a function declaration that is visible within the containing IIFE