Konflikty premenných v JavaScripte

Predpokladajme, že máme HTML stránku index.html, na ktorej v tagu script vytvoríte premennú str a vypíšete ju na obrazovku:

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

Predpokladajme, že máme tiež súbor script.js, v ktorom je tiež definovaná premenná str:

let str = 'file text';

Predpokladajme teraz, že náš súbor script.js je pripojený k stránke index.html nasledovným spôsobom:

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

Keďže premenná str existuje aj v súbore index.html, aj v súbore script.js, dôjde ku konfliktu, v ktorom vyhrá tá premenná, ktorá je napísaná nižšie, teda premenná zo súboru script.js. To znamená, že náš kód vypíše 'file text', a nie 'script text', ako očakávame.

Problém je v skutočnosti veľmi vážny. V reálnom webe budete mať najčastejšie niekoľko súborov so svojimi skriptmi, navyše budete pripájať nejaké externé pluginy. V tomto prípade môžu premenné a funkcie jedného súboru konfliktovať s premennými a funkciami iného súboru.