জাভাস্ক্রিপ্টে ভেরিয়েবল কনফ্লিক্ট

ধরুন আমাদের কাছে একটি 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' দেখাবে না, যেমন আমরা আশা করি।

সমস্যাটি আসলে খুবই গুরুতর। একটি রিয়েল ওয়েবসাইটে আপনার বেশিরভাগ সময় বেশ কয়েকটি স্ক্রিপ্ট ফাইল থাকবে, এছাড়াও আপনি কিছু থার্ড-পার্টি প্লাগইন সংযুক্ত করবেন। এই ক্ষেত্রে এক ফাইলের ভেরিয়েবল এবং ফাংশন অন্য ফাইলের ভেরিয়েবল এবং ফাংশনের সাথে সংঘর্ষে লিপ্ত হতে পারে।