Konflik Pembolehubah dalam JavaScript

Katakan kita mempunyai halaman HTML index.html, di mana dalam tag script anda mencipta pembolehubah str dan memaparkannya pada skrin:

<html>
	<head>
		<script>
			let str = 'teks skrip';
			alert(str); // akan memaparkan 'teks skrip'
		</script>
	</head>
	<body>
		...
	</body>
</html>

Katakan kita juga mempunyai fail script.js, di mana pembolehubah str juga ditetapkan:

let str = 'teks fail';

Sekarang, katakan fail kita script.js disambungkan kepada halaman index.html dengan cara berikut:

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

Oleh kerana pembolehubah str wujud dalam kedua-dua fail index.html dan fail script.js, konflik akan berlaku, di mana pembolehubah yang ditulis di bawah akan menang, iaitu pembolehubah dari fail script.js. Maksudnya, kod kami akan memaparkan 'teks fail', dan bukannya 'teks skrip' seperti yang kami jangkakan.

Masalah ini sebenarnya sangat serius. Dalam laman web sebenar, anda selalunya akan mempunyai beberapa fail dengan skrip anda, selain itu, anda akan menyambungkan beberapa plugin pihak ketiga. Dalam kes ini, pembolehubah dan fungsi dari satu fail boleh berkonflik dengan pembolehubah dan fungsi dari fail lain.