Konflikty proměnných v JavaScriptu

Nechť máme HTML stránku index.html, na které v tagu script vytvoříte proměnnou str a vypíšete ji na obrazovku:

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

Nechť máme také soubor script.js, ve kterém je také nastavena proměnná str:

let str = 'file text';

Nechť je nyní náš soubor script.js připojen ke stránce index.html následujícím způsobem:

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

Protože proměnná str je jak v souboru index.html, tak v souboru script.js, dojde ke konfliktu, ve kterém vyhraje ta proměnná, která je napsána níže, tedy proměnná ze souboru script.js. To znamená, že náš kód vypíše 'file text', a ne 'script text', jak očekáváme.

Problém je ve skutečnosti velmi závažný. V reálném webu budete mít nejčastěji několik souborů se svými skripty, kromě toho budete připojovat nějaké pluginy třetích stran. V tomto případě mohou proměnné a funkce jednoho souboru konfliktovat s proměnnými a funkcemi jiného souboru.