Veranderlike Konflikte in JavaScript

Gestel ons het 'n HTML-bladsy index.html, waar jy in die script-tag 'n veranderlike str skep en dit op die skerm vertoon:

<html>
	<head>
		<script>
			let str = 'script text';
			alert(str); // sal 'script text' vertoon
		</script>
	</head>
	<body>
		...
	</body>
</html>

Gestel ons het ook 'n lêer script.js, waarin ook 'n veranderlike str gestel word:

let str = 'file text';

Gestel ons lêer script.js word nou soos volg by die bladsy index.html gekoppel:

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

Aangesien die veranderlike str beide in die lêer index.html en in die lêer script.js voorkom, sal daar 'n konflik wees, waar die veranderlike wat onder geskryf is, sal wen, dit wil sê die veranderlike vanuit die lêer script.js. Dit beteken ons kode sal 'file text' vertoon, en nie 'script text' soos ons verwag nie.

Die probleem is eintlik baie ernstig. In 'n werklike webwerf sal jy meestal verskeie lêers met jou skripte hê, boonop sal jy een of ander eksterne inproppe koppel. In hierdie geval kan veranderlikes en funksies van een lêer met veranderlikes en funksies van 'n ander lêer bots.