Конфликты переменных в 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', как мы ожидаем.

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