JavaScriptにおける変数の競合

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

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

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

let str = 'file text';

ここで、ファイルscript.jsが次のようにページindex.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'を出力します。

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