Variables conflicts in JavaScript

Suppose we have an index.html HTML page where you create a variable str in the script tag and display it on the screen:

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

Suppose we also have a script.js file, which also sets the variable str:

script.jslet str = 'file text';

Now let our script.js file be linked to the index.html page as follows:

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

Since the variable str exists both in the index.html file and in the script.js file, there will be a conflict in which that variable will win, which is written below, that is, a variable from the script.js file. So our code will output 'file text', not 'script text' as we expect.

The problem is actually very serious. In a real site, you will most often have several files with your scripts, in addition, you will use some third-party plugins. In this case, the variables and functions of one file may conflict with the variables and functions of another file.