Конфликти променљивих у 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', као што очекујемо.

Проблем је у ствари веома озбиљан. У реалном сајту ћете најчешће имати неколико фајлова са својим скриптама, поред тога, повезиваћете неке додатке страних произвођача. У том случају променљиве и функције једног фајла могу доћи у сукоб са променљивим и функцијама другог фајла.