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:

<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:

let str = 'file text';

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

<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 alert 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.