JS에서 객체에 function을 선언해야 하는 이유(feat. 전역 변수 충돌)

JS에서 스코프 관리

아래의 A.js 코드가 있습니다.

function sayHello() {
     console.log("hello"); 
}

..

Hello 콘솔에 출력하는 sayHello라는 함수가 있습니다.

근데 만약 아래의 B.js 라는 파일이 추가가 되면 어떻게 될까요?

function sayHello() {
     console.log("bye"); 
}

HTML 스크립트에 이렇게 선언이 되어있다면?

...
<html>
<body>
  <!-- ...생략 -->
  <script src="/js/A.js"></script>
  <script src="/js/B.js"></script>
</body>
</html>

만약 이런식으로 불러오게 된다면, sayHello()는 어떤 값을 출력하게 될까요?

브라우저의 스코프는 공용 공간으로 쓰이기 때문에 마지막에 로딩된 B.js에 있는 sayHello 함수가 A.js의 sayHello 함수를 덮어쓰게 됩니다.

그래서 결국엔 "bye"가 출력이 되는 것이죠.

그렇기 때문에 함수를 선언할 때에는 이런 불상사가 생기지 않도록 한번 감싸주는 것 입니다.

A.js

var A_fun = {
     sayHello: function() {
      console.log("hello");
    };
}

B.js

var B_fun = {
     sayHello: function() {
      console.log("bye");
    };
}

이런식으로 변경하면 한쪽이 덮어씌어지거나 하는 문제가 발생하지 않겠죠?

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`