브라우저의 스코프

src/main/resources/static/js/app/index.js

var init = function() {
		~
	};
    var save = function() {
    	~
    };
    
    init();

index.js의 첫 문장에 var main = { ~ }라는 코드를 선언했는데 굳이 index라는 변수의 속성으로 function을 추가한 이유가 뭘까?

 

예를 들어 index.mustache에서 a.js가 추가되어 a.js도 a.js만의 init과 save function이 있다해도 브라우저의 스코프는 공용 공간으로 쓰이기 때문에 나중에 로딩된 js의 init, save가 먼저 로딩된 js의 function을 덮어쓰게 된다.

 

여러 사람이 참여하는 프로젝트에서 중복된 함수 이름은 자주 발생할 수 있다. 그러다 보니 이런 문제를 피하려고 index.js만의 유효범위를 만들어 사용한다.

-> 방법은 var index이란 객체를 만들어 해당 객체에서 필요한 모든 function을 선언하는 것이다. 이렇게 하면 index 객체 안에서만 functioni이 유효하기 때문에 다른 JS와 겹칠 위험이 사라진다.