Conflits de variables en JavaScript

Supposons que nous ayons une page HTML index.html, sur laquelle dans la balise script vous créez une variable str et l'affichez à l'écran :

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

Supposons que nous ayons également un fichier script.js, dans lequel une variable str est également définie :

let str = 'file text';

Supposons maintenant que notre fichier script.js soit connecté à la page index.html de la manière suivante :

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

Puisque la variable str existe à la fois dans le fichier index.html et dans le fichier script.js, il y aura un conflit, dans lequel la variable qui est écrite en dessous l'emportera, c'est-à-dire la variable du fichier script.js. C'est-à-dire que notre code affichera 'file text', et non 'script text' comme nous nous y attendons.

Le problème est en réalité très sérieux. Dans un site réel, vous aurez le plus souvent plusieurs fichiers avec vos scripts, en plus, vous connecterez des plugins tiers. Dans ce cas, les variables et fonctions d'un fichier peuvent entrer en conflit avec les variables et les fonctions d'un autre fichier.