Conflitos de Variáveis em JavaScript

Suponha que temos uma página HTML index.html, na qual na tag script você cria uma variável str e a exibe na tela:

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

Suponha também que temos um arquivo script.js, no qual também é definida uma variável str:

let str = 'file text';

Agora, suponha que nosso arquivo script.js seja incluído na página index.html da seguinte forma:

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

Como a variável str existe tanto no arquivo index.html quanto no arquivo script.js, haverá um conflito, no qual a variável que prevalecerá será aquela que foi declarada por último, ou seja, a variável do arquivo script.js. Isso significa que nosso código exibirá 'file text', e não 'script text', como esperamos.

O problema é, na verdade, muito sério. Em um site real, você frequentemente terá vários arquivos com seus próprios scripts, além de inclusão de plugins de terceiros. Nesse caso, as variáveis e funções de um arquivo podem entrar em conflito com as variáveis e funções de outro arquivo.