Konflikti promenljivih u JavaScript-u

Recimo da imamo HTML stranicu index.html, na kojoj u tagu script kreirate promenljivu str i prikazujete je na ekranu:

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

Recimo da takođe imamo fajl script.js, u kojem je takođe zadata promenljiva str:

let str = 'file text';

Neka sada naš fajl script.js bude povezan sa stranicom index.html na sledeći način:

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

Pošto promenljiva str postoji i u fajlu index.html, i u fajlu script.js, doći će do konflikta, u kojem će pobediti ona promenljiva koja je napisana ispod, odnosno promenljiva iz fajla script.js. To znači da će naš kod ispisati 'file text', a ne 'script text', kao što očekujemo.

Problem je zapravo veoma ozbiljan. U stvarnom sajtu najčešće ćete imati nekoliko fajlova sa vašim skriptama, pored toga, povezaćete neke dodatne (strane) plaginove. U ovom slučaju promenljive i funkcije jednog fajla mogu da dođu u konflikt sa promenljivama i funkcijama drugog fajla.