JavaScriptにおける変数の競合

ここに、index.htmlというHTMLページがあり、 scriptタグ内で変数strを作成し、 画面に表示しているとします：

index.html<html>
  <head>
    <script>
      let str = 'script text';
      alert(str); // 'script text'を出力
    </script>
  </head>
  <body>
    ...
  </body>
</html>

また、script.jsというファイルがあり、 そこでも変数strが設定されているとします：

script.jslet str = 'file text';

ここで、ファイルscript.jsが次のように ページindex.htmlに接続されるとします：

html<html>
  <head>
    <script>
      let str = 'script text';
    </script>
    <script src="script.js"></script>
    <script>
      alert(str);
    </script>
  </head>
  <body>
    ...
  </body>
</html>

変数strはファイルindex.htmlと ファイルscript.jsの両方に存在するため、 競合が発生し、より下に書かれた変数、つまり ファイルscript.jsからの変数が優先されます。 したがって、このコードは期待する'script text'ではなく、 'file text'を出力します。

この問題は実際には非常に深刻です。 実際のサイトでは、ほとんどの場合、複数のスクリプトファイルがあり、 さらにいくつかのサードパーティ製プラグインを接続することになります。 この場合、あるファイルの変数や関数が、 別のファイルの変数や関数と競合する可能性があります。