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 파일의 변수가 승리합니다. 따라서 우리 코드는 기대했던 'script text' 대신 'file text'를 출력할 것입니다.

이 문제는 실제로 매우 심각합니다. 실제 웹사이트에서는 여러 개의 자체 스크립트 파일과 다른 서드파티 플러그인들도 연결하게 될 것입니다. 이 경우 한 파일의 변수와 함수가 다른 파일의 변수 및 함수와 충돌할 수 있습니다.