Konflikty proměnných v JavaScriptu

Nechť máme HTML stránku index.html, na které v tagu script vytvoříte proměnnou str a vypíšete ji na obrazovku:

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

Nechť máme také soubor script.js, ve kterém je také nastavena proměnná str:

script.jslet str = 'file text';

Nechť je nyní náš soubor script.js připojen ke stránce index.html následujícím způsobem:

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

Protože proměnná str je jak v souboru index.html, tak v souboru script.js, dojde ke konfliktu, ve kterém vyhraje ta proměnná, která je napsána níže, tedy proměnná ze souboru script.js. To znamená, že náš kód vypíše 'file text', a ne 'script text', jak očekáváme.

Problém je ve skutečnosti velmi závažný. V reálném webu budete mít nejčastěji několik souborů se svými skripty, kromě toho budete připojovat nějaké pluginy třetích stran. V tomto případě mohou proměnné a funkce jednoho souboru konfliktovat s proměnnými a funkcemi jiného souboru.