Конфликти с променливи в 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. Тоест нашият код ще изведе 'file text', а не 'script text', както очакваме.

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