質問文の該当のソースコード全体は「即時実行関数」や「即時関数」ですが、
これは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に勝手に型変換されますし
+
や-
は数値に勝手に型変換されます。
その辺邪魔しないグループ化演算子が良い子で使いやすいですね。
即時実行関数を書きたい場合はほぼ全ての現場が丸括弧で包むというやり方でやっています。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/21 08:41