Конфликти на променливи во 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', како што очекуваме.

Проблемот всушност е многу сериозен. Во реалниот веб-сајт најчесто ќе имате неколку датотеки со вашите скрипти, покрај тоа, ќе поврзувате и некои странични приклучоци. Во овој случај, променливите и функциите од едната датотека може да конфликтираат со променливите и функциите од друга датотека.