Konflikti promenljivih u JavaScript-u

Recimo da imamo HTML stranicu index.html, na kojoj u tagu script kreirate promenljivu str i prikazujete je na ekranu:

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

Recimo da takođe imamo fajl script.js, u kojem je takođe zadata promenljiva str:

script.jslet str = 'file text';

Neka sada naš fajl script.js bude povezan sa stranicom index.html na sledeći način:

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

Pošto promenljiva str postoji i u fajlu index.html, i u fajlu script.js, doći će do konflikta, u kojem će pobediti ona promenljiva koja je napisana ispod, odnosno promenljiva iz fajla script.js. To znači da će naš kod ispisati 'file text', a ne 'script text', kao što očekujemo.

Problem je zapravo veoma ozbiljan. U stvarnom sajtu najčešće ćete imati nekoliko fajlova sa vašim skriptama, pored toga, povezaćete neke dodatne (strane) plaginove. U ovom slučaju promenljive i funkcije jednog fajla mogu da dođu u konflikt sa promenljivama i funkcijama drugog fajla.