Konflikty zmiennych w JavaScript

Załóżmy, że mamy stronę HTML index.html, na której w tagu script tworzysz zmienną str i wyświetlasz ją na ekranie:

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

Załóżmy, że mamy również plik script.js, w którym również jest zdefiniowana zmienna str:

script.jslet str = 'file text';

Załóżmy teraz, że nasz plik script.js jest podłączony do strony index.html w następujący sposób:

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

Ponieważ zmienna str występuje zarówno w pliku index.html, jak i w pliku script.js, powstanie konflikt, w którym wygra ta zmienna, która jest zapisana poniżej, czyli zmienna z pliku script.js. Oznacza to, że nasz kod wyświetli 'file text', a nie 'script text', jak oczekujemy.

Problem jest w rzeczywistości bardzo poważny. W prawdziwej stronie internetowej najczęściej będziesz miał kilka plików z własnymi skryptami, oprócz tego będziesz podłączać jakieś zewnętrzne wtyczki. W takim przypadku zmienne i funkcje jednego pliku mogą kolidować ze zmiennymi i funkcjami innego pliku.