Konflik Variabel dalam JavaScript

Misalkan kita memiliki halaman HTML index.html, di mana dalam tag script Anda membuat variabel str dan menampilkannya di layar:

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

Misalkan kita juga memiliki file script.js, di mana variabel str juga didefinisikan:

let str = 'teks file';

Sekarang misalkan file script.js kita terhubung ke 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>

Karena variabel str ada baik di file index.html maupun di file script.js, maka akan terjadi konflik, di mana variabel yang menang adalah variabel yang ditulis di bawah, yaitu variabel dari file script.js. Artinya kode kita akan menampilkan 'teks file', bukan 'teks skrip', seperti yang kita harapkan.

Masalahnya sebenarnya sangat serius. Dalam situs nyata, Anda paling sering akan memiliki beberapa file dengan skrip Anda, selain itu, Anda akan menghubungkan beberapa plugin pihak ketiga. Dalam hal ini, variabel dan fungsi dari satu file dapat bertentangan dengan variabel dan fungsi dari file lain.