[JavaScript] 자바스크립트에서 변수 안에 함수를 넣는 이유는? - 브라우저 공용 scope에 관하여

자바스크립트 코드를 보다보면

var SearchModule = {

  init : function () {...}

  .....

}

처럼 var로 변수를 하나 만들어 놓고 그 변수안에다가 init을 비롯한 Event, function 등을 넣는 경우가 있다.

왜 이렇게 하는가?

 

브라우저는 공용 공간으로 쓰이기 때문에 나중에 로딩된 js의 function들이 먼저 로딩된 js의 function을 덮어쓴다.

(ex. a.js와 b.js에 모두 search()라는 함수가 있을때, 나중에 로딩된 js의 search()만 동작한다.)

프로젝트가 대규모로 커질수록 함수의 이름을 각각 관리하기 어렵기때문에 함수명 중복이 일어날 수 있다.

중복된 함수로 인해 로직이 덮어씌어지면.. 프로그램에 문제가 발생할 가능성이 높기에

이를 예방하고자 js별로 유효범위를 만들어 사용한다.

 

var SearchModule이라는 객체를 만들어 해당 객체 내에서 쓰는 모든 함수를 선언한다.

그러면 SearchModule 객체 안에서만 함수들이 유효하기에 다른 Javascript들과 겹칠 위험이 사라진다.

이를 프론트엔드의 스코프 관리라고들 한다.

ES6을 비롯한 앵귤러,리액트,뷰js는 이미 이런 기능을 프레임워크단에서 지원하고 있다.

 

 

참고 - 스프링부트와 AWS로 혼자구현하는 웹서비스