为什么这里需要功能名称？

Question

I've been testing this in the browser console of FireFox, not sure if other javascript environments have this:

◄ {x:function(){console.log("test");}}["x"]();
► SyntaxError: function statement requires a name

Why? This works though:

◄ ({x:function(){console.log("test");}})["x"]();
► undefined
► "test"

(In case anyone is wondering: I really hate the switch,case,break syntax. I'd rather use this construction.)

Answer 1

The brackets in the first one is resulting in a block statement .

The first one looks like this when the semicolons are injected

{
    x : function() { 
        console.log("test");
    }
};
["x"]();

Answer 2

Syntax of JavaScript can be ambiguous. First example is parsed as opening of block ( { ) followed by label ( x: , the one you would jump to by break or continue ), then function declaration . When declaring functions, you have to provide name.

Second example is parsed as an expression, as it is enclosed in parentheses ( ( ), so { is interpreted as anonymous object with x property, which value is function expression . Function statements can be anonymous.

Answer 3

This is because you are creating a block. As MDN describes :

A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.

This is a block:

{}

It is a statement. It does not return anything. All it does is group zero or more other statements together. When Javascript sees { at the beginning of a line, it thinks "aha, we have a block here".

This, however, is not a block:

({})

That is an expression. It has a return value. Here, in an expression context, {} delimits an object literal, not a block.

So, with your code, let's break it up a bit:

{ // start a block
    x: // create a label called x
    function(){console.log("test");} // create a function expression
} // end the block
["x"](); // create an array with one element and attempt to execute it as a function

Now, the last line would obviously fail, but we never get there. When Javascript sees function at the beginning of a line, it expects a function statement. You are giving it an anonymous function expression. This is invalid in this context and causes an error.

---

By contrast, your other statement:

( // start an expression
    { // create an object
        x: function(){console.log("test");} // create a property called x with an anonymous function as its value
    } // end the object
) // end the expression and return the object
["x"] // get the `x` property from the returned object
(); // execute it

Answer 4

In Opera 12.16, it does basically the same thing, except telling you

["x"] is not a function

Which it really isn't: In your first statement, you define

{x:function(){console.log("test");}}

If you enter this on your own, it will evaluate to

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

But if you put no parentheses around it, it will do just that, evaluate to an anonymous object and begone for the rest of your statement. If you put a dot like this:

{x:function(){console.log("test");}}.x

There will be a syntax error. if you do

({x:function(){console.log("test");}}).x

it will work.