Конфликты переменных в JavaScript

Пусть у нас есть HTML страница index.html, на которой в теге script вы создаете переменную str и выводите ее на экран:

index.html<html>
  <head>
    <script>
      let str = 'script text';
      alert(str); // выведет 'script text'
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Пусть у нас также есть файл script.js, в котором также задается переменная str:

script.jslet str = 'file text';

Пусть теперь наш файл script.js подключается к странице index.html следующим образом:

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

Так как переменная str есть и в файле index.html, и в файле script.js, то будет конфликт, в котором победит та переменная, которая написана ниже, то есть переменная из файла script.js. To есть наш код выведет 'file text', а не 'script text', как мы ожидаем.

Проблема на самом деле очень серьезная. В реальном сайте у вас чаще всего будет несколько файлов с вашими скриптами, кроме того, вы будете подключать какие-то сторонние плагины. В этом случае переменные и функции одного файла могут конфликтовать с переменными и функциями другого файла.