TL;DR: In ES6, an IIFE is implemented as follows:
1 2 3 | (() => {...})(); |
…
Unlike ES5, which is syntactically less opinionated, in ES6, when using an IIFE, parenthetical order matters.
For instance, in ES5 an IIFE could be written either as:
1 2 3 4 5 | // parentheses wrap expression and invocation ... (function() { }()); |
… or
1 2 3 4 5 | // parentheses wrap function expression ... (function() { })(); |
As can be seen in the above examples, in ES5 one could either wrap and invoke a function expression in parentheses, or wrap the function expression in parentheses and invoke the function outside of the parentheses.
However, in ES6, the former throws an exception, thus, one can not use:
1 2 3 4 | (() => { }()); // Uncaught SyntaxError: Unexpected token |
But rather, the invocation must be made outside of the parentheses as follows:
1 2 3 4 5 | (() => { console.log('IIFE'); })(); |
As an aside for those who are curious, the syntax requirements are specific to ES6 and not a by-product of any particular transpilers (i.e. Babel, Traceur, etc.).
If you are not assigning the result of the IIFE to a variable, you actually can get away with just using a block and block scoped variables.