Συγκρούσεις Μεταβλητών στο JavaScript

Ας υποθέσουμε ότι έχουμε μια σελίδα HTML index.html, στην οποία μέσα στην ετικέτα script δημιουργείτε μια μεταβλητή str και την εμφανίζετε στην οθόνη:

<html>
	<head>
		<script>
			let str = 'κείμενο script';
			alert(str); // θα εμφανίσει 'κείμενο script'
		</script>
	</head>
	<body>
		...
	</body>
</html>

Ας υποθέσουμε επίσης ότι έχουμε ένα αρχείο script.js, στο οποίο ορίζεται επίσης μια μεταβλητή str:

let str = 'κείμενο αρχείου';

Ας υποθέσουμε τώρα ότι το αρχείο μας script.js συνδέεται στη σελίδα index.html με τον ακόλουθο τρόπο:

<html>
	<head>
		<script>
			let str = 'κείμενο script';
		</script>
		<script src="script.js"></script>
		<script>
			alert(str);
		</script>
	</head>
	<body>
		...
	</body>
</html>

Εφόσον η μεταβλητή str υπάρχει τόσο στο αρχείο index.html, όσο και στο αρχείο script.js, θα προκύψει μια σύγκρουση, στην οποία θα υπερισχύσει η μεταβλητή που βρίσκεται πιο κάτω, δηλαδή η μεταβλητή από το αρχείο script.js. Δηλαδή, ο κώδικάς μας θα εμφανίσει 'κείμενο αρχείου', και όχι 'κείμενο script', όπως αναμένουμε.

Το πρόβλημα είναι στην πραγματικότητα πολύ σοβαρό. Σε μια πραγματική ιστοσελίδα, τις περισσότερες φορές θα έχετε πολλά αρχεία με τα δικά σας scripts, εκτός αυτού, θα συνδέετε και κάποια plugins τρίτων. Σε αυτήν την περίπτωση, οι μεταβλητές και οι συναρτήσεις ενός αρχείου μπορούν να συγκρουστούν με τις μεταβλητές και τις συναρτήσεις ενός άλλου αρχείου.