ความขัดแย้งของตัวแปรใน 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' ตามที่เราคาดหวัง

ปัญหาในความเป็นจริงนั้นร้ายแรงมาก ใน เว็บไซต์จริงคุณมักจะมีหลายไฟล์ ที่มีสคริปต์ของคุณ นอกจากนี้คุณ อาจเชื่อมต่อปลั๊กอินจากบุคคลที่สาม ในกรณีนี้ตัวแปรและฟังก์ชันของไฟล์หนึ่ง อาจขัดแย้งกับตัวแปรและ ฟังก์ชันของอีกไฟล์หนึ่ง