conflicte de variabile în JavaScript

Să presupunem că avem o pagină HTML index.html, în care în tag-ul script creați o variabilă str și o afișați pe ecran:

<html>
	<head>
		<script>
			let str = 'script text';
			alert(str); // va afișa 'script text'
		</script>
	</head>
	<body>
		...
	</body>
</html>

Să presupunem că avem și fișierul script.js, în care este de asemenea definită variabila str:

let str = 'file text';

Să presupunem acum că fișierul nostru script.js este conectat la pagina index.html în felul următor:

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

Deoarece variabila str există atât în fișierul index.html, cât și în fișierul script.js, va apărea un conflict, în care va câștiga variabila care este scrisă mai jos, adică variabila din fișierul script.js. Adică codul nostru va afișa 'file text', și nu 'script text', cum ne așteptăm.

Problema este de fapt foarte serioasă. Într-un site real, de cele mai multe ori veți avea mai multe fișiere cu scripturile voastre, în plus, veți conecta niște plugin-uri terțe. În acest caz, variabilele și funcțiile unui fișier pot intra în conflict cu variabilele și funcțiile altui fișier.