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:

index.html<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:

script.jslet str = 'file text';

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

html<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.