Muutujate konfliktid JavaScriptis

Oletame, et meil on HTML-lehekülg index.html, mille script siltides loome muutuja str ja kuvame selle ekraanile:

index.html<html>
  <head>
    <script>
      let str = 'script text';
      alert(str); // kuvab 'script text'
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Oletame, et meil on ka fail script.js, milles samuti määratakse muutuja str:

script.jslet str = 'file text';

Oletame nüüd, et meie faili script.js ühendatakse lehele index.html järgmisel viisil:

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

Kuna muutuja str on nii failis index.html kui ka failis script.js, tekib konflikt, kus võidab see muutuja, mis on kirjutatud allpool, ehk muutuja failist script.js. See tähendab, et meie kood kuvab 'file text', mitte 'script text', nagu me ootame.

Probleem on tegelikult väga tõsine. Reaalses veebisaidis on teil enamasti mitu oma skripti faili, lisaks ühendate mõnda kolmanda osapoole pluginaid. Sel juhul võivad ühe faili muutujad ja funktsioonid konflikteerida teise faili muutujate ja funktsioonidega.