Változó ütközések a JavaScript-ben

Tegyük fel, hogy van egy index.html HTML oldalunk, amelyen a script tagben létrehozunk egy str változót és kiírjuk a képernyőre:

<html>
	<head>
		<script>
			let str = 'script text';
			alert(str); // kiírja 'script text'
		</script>
	</head>
	<body>
		...
	</body>
</html>

Tegyük fel, hogy van egy script.js fájlunk is, amelyben szintén megadunk egy str változót:

let str = 'file text';

Tegyük fel most, hogy a script.js fájlunkat a következőképpen csatoljuk a index.html oldalhoz:

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

Mivel a str változó megtalálható mind a index.html fájlban, mind a script.js fájlban, ütközés fog bekövetkezni, amelyben az a változó nyer, amelyik alul van írva, azaz a script.js fájlból származó változó. Vagyis a kódunk 'file text'-t fog kiírni, és nem 'script text'-t, ahogy elvárnánk.

A probléma valójában nagyon komoly. Egy valós weboldalon esetünkben gyakran több szerkesztési fájl is lesz, emellett csatolni fogunk különféle harmadik féltől származó bővítményeket. Ebben az esetben az egyik fájl változói és függvényei ütközhetnek egy másik fájl változóival és függvényeivel.