Konflikti spremenljivk v JavaScript

Recimo, da imamo HTML stran index.html, na kateri v tagu script ustvarite spremenljivko str in jo prikažete na zaslon:

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

Recimo, da imamo tudi datoteko script.js, v kateri je prav tako nastavljena spremenljivka str:

let str = 'file text';

Naj se zdaj naša datoteka script.js priklopi na stran index.html na naslednji način:

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

Ker spremenljivka str obstaja tako v datoteki index.html kot v datoteki script.js, bo prišlo do konflikta, v katerem bo zmagala tista spremenljivka, ki je napisana spodaj, to je spremenljivka iz datoteke script.js. To pomeni, da bo naša koda izpisala 'file text' in ne 'script text', kot pričakujemo.

Težava je pravzaprav zelo resna. V realnem spletnem mestu boste imeli največkrat več datotek z vašimi skripti, poleg tega pa boste povezovali tudi nekatere zunanje vtičnike. V tem primeru lahko spremenljivke in funkcije ene datoteke pridejo v konflikt s spremenljivkami in funkcijami druge datoteke.