Variabelkonflikter i JavaScript

Låt oss säga att vi har en HTML-sida index.html, där du i taggen script skapar en variabel str och skriver ut den på skärmen:

<html>
	<head>
		<script>
			let str = 'script text';
			alert(str); // kommer att skriva ut 'script text'
		</script>
	</head>
	<body>
		...
	</body>
</html>

Låt oss också säga att vi har en fil script.js, där en variabel str också definieras:

let str = 'file text';

Låt oss nu säga att vår fil script.js kopplas till sidan index.html på följande sätt:

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

Eftersom variabeln str finns både i filen index.html och i filen script.js, kommer en konflikt att uppstå, där variabeln som skrivs nedanför vinner, det vill säga variabeln från filen script.js. Det betyder att vår kod kommer att skriva ut 'file text', och inte 'script text', som vi förväntar oss.

Problemet är faktiskt mycket allvarligt. I en riktig webbplats kommer du oftast att ha flera filer med dina skript, dessutom kommer du att ansluta några externa plugins. I det här fallet kan variabler och funktioner från en fil konfliktera med variabler och funktioner från en annan fil.