Xung đột biến trong JavaScript

Giả sử chúng ta có một trang HTML index.html, trong đó, trong thẻ script, bạn tạo ra một biến str và hiển thị nó ra màn hình:

<html>
	<head>
		<script>
			let str = 'script text';
			alert(str); // sẽ hiển thị 'script text'
		</script>
	</head>
	<body>
		...
	</body>
</html>

Giả sử chúng ta cũng có một tệp script.js, trong đó cũng khai báo biến str:

let str = 'file text';

Bây giờ giả sử tệp script.js của chúng ta được kết nối với trang index.html theo cách sau:

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

Vì biến str có cả trong tệp index.html và trong tệp script.js, nên sẽ xảy ra xung đột, trong đó biến nào được viết ở dưới sẽ thắng, tức là biến từ tệp script.js. Nghĩa là mã của chúng ta sẽ hiển thị 'file text', chứ không phải 'script text' như chúng ta mong đợi.

Vấn đề thực sự rất nghiêm trọng. Trong một trang web thực tế, bạn thường sẽ có nhiều tệp với các script của mình, ngoài ra, bạn sẽ kết nối một số plugin của bên thứ ba. Trong trường hợp này, các biến và hàm của một tệp có thể xung đột với các biến và hàm của tệp khác.