Konflikty zmiennych w JavaScript

Załóżmy, że mamy stronę HTML index.html, na której w tagu script tworzysz zmienną str i wyświetlasz ją na ekranie:

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

Załóżmy, że mamy również plik script.js, w którym również jest zdefiniowana zmienna str:

let str = 'file text';

Załóżmy teraz, że nasz plik script.js jest podłączony do strony index.html w następujący sposób:

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

Ponieważ zmienna str występuje zarówno w pliku index.html, jak i w pliku script.js, powstanie konflikt, w którym wygra ta zmienna, która jest zapisana poniżej, czyli zmienna z pliku script.js. Oznacza to, że nasz kod wyświetli 'file text', a nie 'script text', jak oczekujemy.

Problem jest w rzeczywistości bardzo poważny. W prawdziwej stronie internetowej najczęściej będziesz miał kilka plików z własnymi skryptami, oprócz tego będziesz podłączać jakieś zewnętrzne wtyczki. W takim przypadku zmienne i funkcje jednego pliku mogą kolidować ze zmiennymi i funkcjami innego pliku.