44

Does anyone know how to write an immediate function using ES6 arrow syntax?

Here's the ES3/5 way of doing it:

(function () {
   //...
}());

I've tried the following but get an unexpected token error on the last line.

(() => {
  //...
}());

You can test this here: http://www.es6fiddle.net/hsb8bgu4/

hippietrail
  • 13,703
  • 15
  • 87
  • 133
d13
  • 9,421
  • 11
  • 33
  • 39
  • 3
    Close the grouping before calling -- `})();` http://www.es6fiddle.net/hsb8ot2m/ – Jonathan Lonowski Mar 03 '14 at 04:17
  • This might be a traceur bug (probably related to [this issue](https://github.com/google/traceur-compiler/issues/457)). It works fine with babel ([repl demo](http://babeljs.io/repl/#?experimental=false&evaluate=true&loose=false&spec=false&playground=true&code=()%20%3D%3E%20%7B%0D%0A%20%20return%20%22Yay!%22%0D%0A%7D()%3B)) – Bergi Aug 27 '15 at 00:54
  • Always remember that `function_name `+` ()` === `function_caller` – xgqfrms Jun 24 '17 at 05:33

2 Answers2

67

From the Arrow functions examples,

(() => "foobar")() // returns "foobar"

So, the function invocation operator should be outside.

(() => {
  //...
})();

Sample: http://www.es6fiddle.net/hsb8s1sj/

thefourtheye
  • 206,604
  • 43
  • 412
  • 459
  • 2
    This way works with regular functions too, and it just makes more sense anyway - wrapping the function itself to make it an expression, then calling that expression. The fact that it also works when you wrap the whole function call is a weird quirk imo, I'm glad this doesn't work with arrows – callum Apr 20 '15 at 08:09
11

Here is my demo codes!

Always remember that function_name+() === function_caller

/* ES5 */

// normal function

function abc(){
    console.log(`Hello, ES5's function!`);
}
abc();

var abc = function xyz(){
    console.log(`Hello, ES5's function!`);
};
abc();

// named function

var abc = function xyz(){
    console.log(`Hello, ES5's function!`);
}();


// anonymous function
// 1
(function(){
    console.log(`Hello, ES5's IIFE!`);
})();

// 2
(function(){
    console.log(`Hello, ES5's IIFE!`);
}());

// 3

var abc = function(){
    console.log(`Hello, ES5's function!`);
}();


/* ES6 */

// named arrow function
const xyz = () => {
    console.log(`Hello, ES6's Arrow Function!`);
};
xyz();


const xyz = (() => {
    console.log(`Hello, ES6's Arrow Function!`);
})();


// Uncaught SyntaxError: Unexpected token (

/*
const xyz = (() => {
    console.log(`Hello, ES6's Arrow Function!`);
}());
*/

// anonymous arrow function
(() => {
    console.log(`Hello, ES6's Arrow Function!`);
})();

Using ES6 Arrow Functions realize IIEF!

Immediately-invoked function expression

let x;

(x = () => {
  console.log(`ES6 ${typeof(x)}`);
})();

// ES6 function

// OR

(() => {
  console.log(`ES6 ${typeof(Symbol)}`);
})();

// ES6 function
xgqfrms
  • 5,516
  • 1
  • 37
  • 42
  • "Immediately-invoked function expression" as a term describes a design pattern which has also been referred to as a "self-executing anonymous function." – xgqfrms Dec 02 '16 at 11:25