Канфлікты зменных у 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', як мы чакаем.

Праблема на самой справе вельмі сур'ёзная. У рэальным сайце ў вас найчасцей будзе некалькі файлаў з вашымі скрыптамі, акрамя таго, вы будзеце падключаць якіясьці староннія плагіны. У гэтым выпадку зменныя і функцыі аднаго файла могуць канфліктаваць са зменнымі і функцыямі другога файла.