Variabele conflicten in JavaScript

Stel we hebben een HTML-pagina index.html, waar je in de script-tag een variabele str maakt en deze naar het scherm uitvoert:

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

Stel we hebben ook een bestand script.js, waarin ook een variabele str wordt gedefinieerd:

let str = 'file text';

Stel dat ons bestand script.js nu als volgt wordt gekoppeld aan de pagina index.html:

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

Omdat de variabele str zowel in het bestand index.html als in het bestand script.js staat, zal er een conflict ontstaan, waarbij de variabele die lager staat wint, dat wil zeggen de variabele uit het bestand script.js. Dit betekent dat onze code 'file text' zal tonen, en niet 'script text', zoals we verwachten.

Het probleem is eigenlijk heel serieus. In een echte website zul je meestal meerdere bestanden met je eigen scripts hebben, daarnaast zul je een aantal externe plug-ins koppelen. In dat geval kunnen variabelen en functies van het ene bestand in conflict komen met variabelen en functies van een ander bestand.