JavaScriptの()を用いた式の記法について知りたい。

Question

実現したいこと

記法の名前が知りたい

前提

たまに以下のようなコードがあると思います。動く理由とかはわかるのですが、この記法の具体的な名称があるなら知りたいです。
よろしくお願いします。

エラーメッセージ

該当のソースコード

(async () => {
    const tweets = await formattedDB.find({});
    let tweetArray = [];
    for (const item of tweets) {
        const tweetObj = new tweet(item);
        tweetArray.push(tweetObj);
        console.log(tweetObj.attachments);
    }
})();

Answer 1

質問文の該当のソースコード全体は「即時実行関数」や「即時関数」ですが、
これはJavaScript(以下JS)の仕様を組み合わせた「テクニック」の話になります。

なのでこれらを覚えて帰ってください

• 関数宣言
• 関数式
• グループ化演算子

これらがどう関わってくるのかを順に解説していきます。

---

そもそも丸括弧()なんかで囲わずに
そのままasync () => {関数の中身}()って書けば良いじゃん。
しかしそれは出来ません。

JSではブロック文{}が終わる時、
強制的に;を補って改行してしまうというはた迷惑なルールが存在します。
https://jsprimer.net/basic/statement-expression/

つまりasync () => {関数の中身}と()は別の行として区切られてしまい
JSに「なんなの？この単体()は？何か値入れろよ」とエラーになってしまいます。
Uncaught SyntaxError: Unexpected token ')'

---

でも実際には似たような事は実現できてるじゃん。
「関数宣言」は駄目だけど「関数式」なら出来ますよ。

JSには関数宣言と関数式が存在します。

この2つのどちらになるかは行の先頭にあるか否かで決まります。

{}の終了時の強制的な改行は関数宣言のみ、
関数式の方は強制的な改行が発生しない仕様になっています。

---

丸括弧には主に3つの使い方があります。

• ifやforなどの決められた箇所での利用→ルールなので従わないとエラー
• 関数実行→値の後ろで使った場合
• グループ化演算子→上記以外

グループ化演算子！などという大げさな名前ですが、なんのことはない
四則演算等の優先順位を無視して先に計算しましょうね。
……という算数や数学で出てくるただの丸括弧です。

そんなもんがなんで即時関数の役に立つんだ？

グループ化演算子で関数を包めば、行頭の文字が関数で始まらなくなりますね。
これでサンドイッチにして関数式を作りたいってだけなんです。

つまり(async () => {関数の中身})()は通ります。
この2つの仕様を使ったテクニックが「即時関数」や「即時実行関数」と呼ばれるテクニックになります。

---

行頭に何でも良いから文字挟めば良いならさ、丸括弧()である必要はなくね？

• !function(){}()
• !!function(){}()
• +function(){}()
• -function(){}()

実際試せば全部動きます。

ただし、実際に実行すれば弊害がよく分かります。
!はbooleanに勝手に型変換されますし
+や-は数値に勝手に型変換されます。

その辺邪魔しないグループ化演算子が良い子で使いやすいですね。
即時実行関数を書きたい場合はほぼ全ての現場が丸括弧で包むというやり方でやっています。

Comments

[Buntin]

めちゃくちゃわかりやすかったです。ご丁寧にありがとうございます！

Answer 2

IIFE (Immediately Invoked Function Expression)= 即時実行関数式

• IIFE (即時実行関数式) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

Comments

[Buntin]

ありがとうございます！

Answer 3

即時関数と呼ばれます

Comments

[Buntin]

ありがとうございます！