Konflikty premenných v JavaScripte

Predpokladajme, že máme HTML stránku index.html, na ktorej v tagu script vytvoríte premennú str a vypíšete ju na obrazovku:

index.html<html>
  <head>
    <script>
      let str = 'script text';
      alert(str); // vypíše 'script text'
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Predpokladajme, že máme tiež súbor script.js, v ktorom je tiež definovaná premenná str:

script.jslet str = 'file text';

Predpokladajme teraz, že náš súbor script.js je pripojený k stránke index.html nasledovným spôsobom:

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

Keďže premenná str existuje aj v súbore index.html, aj v súbore script.js, dôjde ku konfliktu, v ktorom vyhrá tá premenná, ktorá je napísaná nižšie, teda premenná zo súboru script.js. To znamená, že náš kód vypíše 'file text', a nie 'script text', ako očakávame.

Problém je v skutočnosti veľmi vážny. V reálnom webe budete mať najčastejšie niekoľko súborov so svojimi skriptmi, navyše budete pripájať nejaké externé pluginy. V tomto prípade môžu premenné a funkcie jedného súboru konfliktovať s premennými a funkciami iného súboru.