ES6 immediately called arrow function

Question

Why does this work in the Node.js console (tested in 4.1.1 and 5.3.0), but does not work in the browser (tested in Chrome)? This block of code should create and call an anonymous function that registers Ok .

 () => { console.log('Ok'); }() 

Also, although the above works in Node, this does not work:

 n => { console.log('Ok'); }() 

And this:

 (n) => { console.log('Ok'); }() 

Odd is that when you add a parameter, it actually throws a SyntaxError in the immediate part.

Answer 1

You need to make this a function expression instead of defining a function that does not need a name and makes it valid JavaScript.

 (() => { console.log('Ok'); })() 

Equivalent to IIFE

 (function(){ console.log('Ok') })(); 

And the possible reason this works in Node.js, but not in chrome, is because its parser interprets it as a self-executing function, since this

 function() { console.log('hello'); }(); 

works great in Node.js This is a function expression, chrome and firefox, and most browsers interpret it that way. You need to call it manually.

The most common way to tell a parser to expect a function expression is to simply wrap it in parens, because in JavaScript, the parser cannot contain statements. At this point, when the parser encounters the keyword function, it parses it as an expression of a function, not a declaration of a function.

As for the parameterized version , this will work.

 ((n) => { console.log('Ok'); })() 

Answer 2

None of them should work without parentheses.

Why?

Because according to the specification:

• The ArrowFunction function is specified in the section Assignment allocation
• LHS CallExpression must be MemberExpression, SuperCall or CallExpression

Therefore, the ArrowFunction cannot be in the LHS of the call.

---

What this effectively means, how to interpret => , is that it works at the same level as the assignment operators = , += , etc.

Value

• x => {foo}() does not become (x => {foo})()
• The interpreter is trying to interpret it as x => ({foo}())
• So this is still a SyntaxError
• Thus, the interpreter decides that ( must have been incorrect and throws a SyntaxError

---

There was a problem with Babel about it here .

Answer 3

The reason you see such problems is because the console itself is trying to emulate the global scope of the context that you are currently targeting. It also tries to capture return values ​​from statements and expressions that you write on the console so that they appear as results. Take for example:

 > 3 + 2 < 5 

Here it is executed as if it were an expression, but you wrote it as if it were a statement. In normal scenarios, the value will be discarded, but here the code must be internally distorted (for example, wrapping the entire operator with the function context and return ), which causes all kinds of strange effects, including problems, re experience.

This is also one of the reasons why some open source ES6 scripts work fine, but not in the Chrome Dev Tools console.

Try this in Node and the Chrome console:

 { let a = 3 } 

In the Node or <script> it works fine, but in the console it gives Uncaught SyntaxError: Unexpected identifier . It also gives you a source link in the form of VMxxx:1 , which you can click to check the estimated source, which displays as:

 ({ let a = 3 }) 

So why did this?

The answer is that it must convert your code to an expression so that the result can be returned to the caller and displayed in the console. You can do this by wrapping the operator in parentheses, which makes it an expression, but also makes the block above syntactically incorrect (the expression cannot have a block declaration).

The console is trying to fix these edge cases by being smart about the code, but this is beyond the scope of this answer, I think. You can specify an error to make sure that it will be fixed.

Here is a good example of something very similar:

stack overflow

The safest way to get your code to work is to make sure that it can be run as an expression and check the SyntaxError source link to find out what the actual execution code is, and reconstruct the solution from this. This usually means a pair of strategically placed parentheses.

In short: the console tries to emulate the global execution context as accurately as possible, but due to limitations of interaction with the v8 engine and JavaScript semantics, this is sometimes difficult or impossible to solve.