次の Javascript (HTMLだけど)は実行時エラーになります。なぜか分かりますか?
<!DOCTYPE html> <html> <body> <script> const a = { b: 'c' } (async () => { console.log('hello') })() </script> </body> </html>
const a = { b: 'c' }
の末尾にセミコロン ;
が無いからです。
{ b: 'c' }
という名前の関数を呼び出していると解釈されてしまったわけです。
(async ...)
の即時実行関数(IIFE)の丸括弧が引数の指定のように捉えられて。
この本で、次のようなイディオムをよく書くのですが ★
のところのセミコロン漏れではまってしまいました。
let importObject = { js: { foo: function () { // ... } } }; // ★ (async () => { let obj = await WebAssembly.instantiateStreaming( fetch('bar.wasm'), importObject); baz = obj.instance.exports.baz; })();
なぜ冒頭のサンプルコードは JS だけじゃなくて HTML とインラインの JS だったか。 答え(?)は、生 JS を書いていれば Prettier のサポートで自動でセミコロンが補完されていてこんなミスしなかったから、という私の実行環境の都合を反映しています。
ちなみに厳密には問題の JS コードを Prettier のフォーマットにかけると次のようになりセミコロンは補完されません。されませんが、十分問題の所在には気付けてそうです。
const a = { b: "c" }(async () => { console.log("hello"); })();
似たようなミスしてる人は結構いますね。