ცვლადების კონფლიქტები 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', როგორც ჩვენ ველით.

პრობლემა რეალურად ძალიან სერიოზულია. რეალურ საიტში თქვენ ხშირად გექნებათ რამდენიმე ფაილი თქვენი სკრიპტებით, გარდა ამისა, თქვენ დააკავშირებთ რამდენიმე გარე პლაგინს. ამ შემთხვევაში ერთი ფაილის ცვლადები და ფუნქციები შეიძლება კონფლიქტში მოხვდნენ სხვა ფაილის ცვლადებთან და ფუნქციებთან.