Конфликти променљивих у JavaScript-у

Претпоставимо да имамо HTML страницу index.html, на којој у тагу script креирате променљиву str и приказујете је на екрану:

index.html<html>
  <head>
    <script>
      let str = 'script text';
      alert(str); // приказује 'script text'
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Претпоставимо да такође имамо фајл script.js, у коме је такође дефинисана променљива str:

script.jslet str = 'file text';

Претпоставимо сада да се наш фајл script.js повезује на страницу index.html на следећи начин:

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

Пошто променљива str постоји и у фајлу index.html, и у фајлу script.js, доћи ће до конфликта, у којем ће победити она променљива која је написана ниже, односно променљива из фајла script.js. То јест наш код ће приказати 'file text', а не 'script text', као што очекујемо.

Проблем је у ствари веома озбиљан. У реалном сајту ћете најчешће имати неколико фајлова са својим скриптама, поред тога, повезиваћете неке додатке страних произвођача. У том случају променљиве и функције једног фајла могу доћи у сукоб са променљивим и функцијама другог фајла.