JavaScript：即時関数にアロー関数を使うと動かないことがある

ウェブ制作ノウハウ

2019.08.16

この記事は約2分で読めます。

記事内に広告が含まれています

こんにちは、さちです。

JavaScript で変数名を汚染しないために使う「即時関数」。

先日、「即時関数」にアロー関数を使ったときに動かないことがあったので、備忘録として記事を書いておきます。

即時関数の書き方は2種類

以前から使われている「即時関数」には、下記のように記述方法が2種類あります。違いは、末尾のカッコの順番です（3, 7行目）。

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

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

この2種類の即時関数はどちらも正常に動作します。どちらを使うかは個人の好みによるところです。

ES2015(ES6) から、「アロー関数」という function を使わずに無名関数を書ける書式（関数リテラル）ができました。（関数の定義では使えない）

let func = function(a, b) {
  console.log(a + b);
}

//アロー関数で書くとこうなる
let func = (a, b) => {
  console.log(a + b);
}

見た目のとおり、=> が矢（アロー）のように見えるので、アロー関数と言います。fucntion よりも記述量が少ないので、コーディングを省力化できます。

そこで、アロー関数を使って即時関数を書くとこうなります。

(() => {
  console.log('OK');	
})();// OK

(() => {
  console.log('OK');	
}());// エラーで動かない

なんと、後者はエラーになってしまい動きません！

これは割りと有名な話のようで、ググれば大量に出てきます。fucntion の即時関数で後者の記述を使っていた人は確実にハマるポイントなので、当然かもしれませんね。

ちなみに、省力化できると書きましたが、単純に代替できるものではないので注意。

アロー関数と fucntion は、関数内の this が何を指すか異なります（アロー関数は宣言時に this が固定される）。完全互換ではないので気をつけましょう。