Конфликти с променливи в JavaScript

Да предположим, че имаме HTML страница index.html, в която в таг script създавате променлива str и я извеждате на екрана:

<html>
	<head>
		<script>
			let str = 'script text';
			alert(str); // ще изведе 'script text'
		</script>
	</head>
	<body>
		...
	</body>
</html>

Да предположим, че имаме и файл script.js, в който също се задава променлива str:

let str = 'file text';

Нека сега нашият файл script.js бъде свързан към страницата index.html по следния начин:

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

Тъй като променливата str съществува както във файла index.html, така и във файла script.js, ще възникне конфликт, в който ще надделее променливата, която е написана по-надолу, тоест променливата от файла script.js. Тоест нашият код ще изведе 'file text', а не 'script text', както очакваме.

Проблемът всъщност е много сериозен. В реалния сайт най-често ще имате няколко файла с вашите скриптове, освен това, вие ще свързвате някакви сторонни плъгини. В този случай променливите и функциите на един файл могат да влизат в конфликт с променливите и функциите на друг файл.