Канфлікты зменных у 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', як мы чакаем.

Праблема на самой справе вельмі сур'ёзная. У рэальным сайце ў вас найчасцей будзе некалькі файлаў з вашымі скрыптамі, акрамя таго, вы будзеце падключаць якіясьці староннія плагіны. У гэтым выпадку зменныя і функцыі аднаго файла могуць канфліктаваць са зменнымі і функцыямі другога файла.