JavaScriptはエラーが起きると、エラー箇所以降の行が実行されなくなる性質がある。
scriptタグに書いたJavaScriptコードでエラーが起きた時、
別のscriptタグに書かれたJavaScriptコードに影響があるかどうかを調べてみました。
検証環境
- Google Chrome 61
- Firefox 55
- Microsoft Edge 40
検証1：直接書いたJavaScriptがエラーになった時、別scriptタグのコードは実行されるか？
scriptタグを分けてJavaScriptコードを書き、エラーを起こした時どんな挙動になるか確認した。
検証コード
test.html
<html>
<body>
<script>
console.log("hoge");
</script>
<script>
// 定義されていない変数を参照する
var aaa = bbb;
console.log("fuga");
</script>
<script>
console.log("piyo");
</script>
</body>
</html>
実行結果
定義されていない変数を参照したところでエラーが起きている。
エラーの次の行にある console.log("fuga") が実行されていない。
しかし、その後に出てくる別scriptタグ内に記述された console.log("piyo") は実行されている。
このことから、エラー以降の行が実行されない性質は、scriptタグの中に留まることが言えそう。
検証2：読み込んだJavaScriptがエラーになった時、別scriptタグで読み込んだ内容は実行されるか？
検証1のコードを外部ファイルに直してみた。
検証コード
test.html
<html>
<body>
<script type="text/javascript" src="./hoge.js"></script>
<script type="text/javascript" src="./fuga.js"></script>
<script type="text/javascript" src="./piyo.js"></script>
</body>
</html>
hoge.js
console.log("hoge");
fuga.js
// 定義されていない変数を参照する
var aaa = bbb;
console.log("fuga");
piyo.js
console.log("piyo");
実行結果
検証1と同様の結果になった。
エラー以降の行が実行されない性質はエラーが起きたscriptタグだけに留まっている。
まとめ
scriptタグに書いたJavaScriptコードでエラーが起きても、
別のscriptタグに書かれたJavaScriptコードはちゃんと実行されることが分かった。
このことから全てのJavaScriptのコードを１箇所にまとめず、scriptタグをあえて分ける方法も考えれそう。
例えば、自サイトにアフィリエイトを貼り付けているとしたら...
<script type="text/javascript" src="自サイトのロジックが書かれたjsファイル"></script>
<script type="text/javascript" src="アフィリエイトのjsファイル"></script>
といった感じに書けば、自サイトのロジックがバグってエラーを起こしても、アフィリエイトの貼り付けは問題なくできる。
必要に応じてscriptタグを分けるといいのかもしれない。