即時関数をアロー関数やfunctionを利用して色々なパターンで書いてみる

JavaScript

即時関数（MDNでいうIIFE (即時実行関数式)）とは定義した直後に実行される関数のことをいいます。

今回は即時関数の書き方について紹介します。

引数がない場合の即時関数の書き方

引数がない場合、即時関数は(関数式)()という形式で表現されます。
つまり、関数式全体を()で囲み、最後に()を追加することで即時関数になります。

たとえば、以下のようなhelloというログを出す関数式があったとします。

const helloLog = function() {
  console.log('hello')
};

helloLog();
// hello

上記の関数式を即時関数にすると以下のようになります。

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

アロー関数を利用すると以下のように書き換えられます。

// functionを利用した即時関数
(function() {
  console.log('hello')
})();


// アロー関数を利用した即時関数
(() => {
  console.log('hello')
})();

アロー関数の省略記法を利用すると、アロー関数を利用した即時関数は以下のように表現できます。

// リテラルが一文なので、{}を省略した
(() => console.log('hello'))();

アロー関数の省略記法についてはアロー関数入門。functionからの書き換えや、省略記法について理解するで解説をしています。

JavaScriptアロー関数入門。functionからの書き換えや、省略記法について理解する

なお、functionを利用した即時関数の場合、全体の()の後に追加する()は関数式の直後に追加する形でも問題ありません。

// ()は即時関数の最後ではなく、関数式の直後に追加してもOK
(function() {
  console.log('hello')
}());

// アロー関数の場合は関数式の直後に()を配置するとエラーになる
(() => {
  console.log('hello')
}());
// Uncaught SyntaxError: Unexpected token '('

引数がある場合の即時関数の書き方

引数がある場合、即時関数は(関数式)(引数に入れる値)という形式で表現されます。
つまり、即時関数の最後の()に代入する値を設定します。

たとえば、以下のような入力値をログ出力する関数式があったとします。

const log = function(message) {
  console.log(message)
};

log('hello');
// hello

上記の関数式を即時関数にすると以下のようになります。

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

アロー関数を利用すると以下のように書き換えられます。

((message) => {
  console.log(message)
})('hello');

アロー関数の省略記法を利用すると、アロー関数を利用した即時関数は以下のように表現できます。

(message => console.log(message))('hello');

なお、functionを利用した即時関数の場合、全体の()の後に追加する()は関数式の直後に追加する形でも問題ありません。

// 即時関数の最後ではなく、関数式の直後に追加してもOK
(function(message) {
  console.log(message)
}('hello'));

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

RECOMMEND