Variablenkonflikte in JavaScript

Nehmen wir an, wir haben eine HTML-Seite index.html, auf der Sie im Tag script eine Variable str erstellen und sie auf dem Bildschirm ausgeben:

<html>
	<head>
		<script>
			let str = 'script text';
			alert(str); // gibt 'script text' aus
		</script>
	</head>
	<body>
		...
	</body>
</html>

Nehmen wir an, wir haben auch eine Datei script.js, in der ebenfalls eine Variable str gesetzt wird:

let str = 'file text';

Nehmen wir nun an, dass unsere Datei script.js wie folgt in die Seite index.html eingebunden wird:

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

Da die Variable str sowohl in der Datei index.html als auch in der Datei script.js vorkommt, wird es einen Konflikt geben, bei dem die Variable gewinnt, die weiter unten geschrieben steht, also die Variable aus der Datei script.js. Das bedeutet, unser Code gibt 'file text' aus und nicht 'script text', wie wir erwarten.

Das Problem ist tatsächlich sehr ernst. In einer realen Website werden Sie meist mehrere Dateien mit eigenen Skripten haben, außerdem werden Sie einige Plugins von Drittanbietern einbinden. In diesem Fall können Variablen und Funktionen einer Datei mit Variablen und Funktionen einer anderen Datei in Konflikt geraten.