Conflictos de Variables en JavaScript

Supongamos que tenemos una página HTML index.html, en la cual, en la etiqueta script, creas una variable str y la muestras en pantalla:

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

Supongamos también que tenemos un archivo script.js, en el cual también se define una variable str:

let str = 'file text';

Ahora supongamos que nuestro archivo script.js se conecta a la página index.html de la siguiente manera:

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

Dado que la variable str existe tanto en el archivo index.html como en el archivo script.js, habrá un conflicto, en el cual prevalecerá la variable que esté escrita más abajo, es decir, la variable del archivo script.js. Esto significa que nuestro código mostrará 'file text', y no 'script text', como esperamos.

El problema es en realidad muy serio. En un sitio web real, frecuentemente tendrás varios archivos con tus scripts, además de que conectarás algunos plugins de terceros. En este caso, las variables y funciones de un archivo pueden entrar en conflicto con las variables y funciones de otro archivo.