Muuttujien ristiriidat JavaScriptissä

Oletetaan, että meillä on HTML-sivu index.html, jolla script -tagissa luot muuttujan str ja tulostat sen näytölle:

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

Oletetaan myös, että meillä on tiedosto script.js, jossa myös määritetään muuttuja str:

script.jslet str = 'file text';

Oletetaan nyt, että tiedostomme script.js liitetään sivulle index.html seuraavalla tavalla:

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

Koska muuttuja str on sekä tiedostossa index.html että tiedostossa script.js, tulee ristiriita, jossa voittaa se muuttuja, joka on kirjoitettu alemmas, eli muuttuja tiedostosta script.js. Eli koodimme tulostaa 'file text', eikä 'script text', kuten odotamme.

Ongelman vakavuus on itse asiassa erittäin suuri. Todellisessa verkkosivustossasi sinulla on useimmiten useita tiedostoja skripteilläsi, lisäksi sinä liität joitain kolmannen osapuolen laajennuksia. Tässä tapauksessa yhden tiedoston muuttujat ja funktiot voivat olla ristiriidassa toisen tiedoston muuttujien ja funktioiden kanssa.