Conflitti di variabili in JavaScript

Supponiamo di avere una pagina HTML index.html, nella quale nel tag script si crea una variabile str e la si visualizza sullo schermo:

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

Supponiamo di avere anche un file script.js, in cui è anch'essa impostata una variabile str:

script.jslet str = 'file text';

Supponiamo ora che il nostro file script.js venga collegato alla pagina index.html nel modo seguente:

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

Poiché la variabile str esiste sia nel file index.html, sia nel file script.js, ci sarà un conflitto, in cui vincerà la variabile scritta più in basso, cioè la variabile del file script.js. Cioè il nostro codice visualizzerà 'file text', e non 'script text', come ci aspettiamo.

Il problema in realtà è molto serio. In un sito reale, molto spesso si avranno diversi file con i propri script, inoltre, si collegheranno alcuni plugin di terze parti. In questo caso, le variabili e le funzioni di un file potrebbero entrare in conflitto con le variabili e le funzioni di un altro file.