Variabelkonflikter i JavaScript

La oss si at vi har en HTML-side index.html, der du i taggen script oppretter en variabel str og viser den på skjermen:

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

La oss si at vi også har en fil script.js, der en variabel str også er definert:

let str = 'file text';

La oss nå si at filen vår script.js blir inkludert på siden index.html på følgende måte:

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

Siden variabelen str finnes både i filen index.html og i filen script.js, vil det oppstå en konflikt der variabelen som er skrevet nederst vil vinne, det vil si variabelen fra filen script.js. Dette betyr at koden vår vil vise 'file text', og ikke 'script text', som vi forventer.

Problemet er faktisk veldig alvorlig. I et ekte nettsted vil du for det meste ha flere filer med dine egne skript, i tillegg til at du vil inkludere noen tredjeparts plugins. I dette tilfellet kan variabler og funksjoner fra én fil konflikte med variabler og funksjoner fra en annen fil.