即時実行関数とは

JSをやってると括弧が多すぎてわけがわからなくなることが多いよ

玉ねぎみたいに括弧が重なってる部分には即時実行関数（IIFE、Immediately Invoked Function Expression）が隠れてるかも？

即時実行関数とは

こんな関数だよ（厳密には関数「式」らしい）

(function() { ... })()

もともとの関数式が

const func = function() { ... };

だとしたら、

式の右側だけを括弧で囲んで、

(function() { ... })

直後に()で呼び出すと即時実行関数になるよ

(function() { ... })()

なぜ即時実行関数を使うのか？

ここら辺はまだよくわかってないけど、こんな理由らしい

変数のスコープを守る

通常の関数を使うと、変数はグローバルスコープに漏れる可能性があるけど、即時実行関数を使えばスコープが関数内に閉じるよ。

useEffect の中で async を使う

React のuseEffectではasyncを直接使えないけど、即時実行関数でラップすると使えるよ。

useEffect(() => {
  (async () => {
    const data = await fetch("/api/data").then(res => res.json());
    console.log(data);
  })(); // 即時実行関数でラップしてる
}, []);

関数式って？

今更知ったけどJSって二種類の関数宣言方法があるんだね。

「関数」の定義方法：

function hello() {}

「関数式」の定義方法：

const hello = function() {};

それぞれの違いはこんな感じ。

巻き上げ (Hoisting)

• 関数: あり (宣言前でも実行OK)
• 関数式: なし (宣言後でないと実行NG)

即時実行（IIFE）にできる？

• 関数: できない
• 関数式：できる

使い分け

• 関数: 基本的な関数定義
• 関数式: IIFEやuseEffectなど

うーん確かに言われてみるとどっちの書き方もみたことあるな

関数の場合は、宣言前でも実行できるのか JSってこういうの独特でむずい