자바스크립트 모듈관리

글로벌 네임스페이스

변수 충돌이 일어나기 쉬운 경우

여러 라이브러리를 한 프로그램에서 로드시 서로 충돌 하는 상황이 생길 수 있다.

네임 스페이스를 통해 최상위 스코프의 확인자가 아니라 속성 형태로 기능이 노출된다.

 

모듈관리

특정 스코프로부터 의존성 관리자를 이용한 다양한 명시적인 방법으로 확인자를 가져와 사용한다.

우발적인 스코프 충돌 예방을 위해 비공개 스코프에 확인자를 저장한다.

var a = 3;

(function foo(){
	var a = 4;
    console.log(a); //4
})();



console.log(a); //3

이 함수는 함수 표현식으로 취급된다.

함수 자신의 내부 스코프에 묶여있다.

함수이름 foo를 자기 내부에 숨기면 함수를 둘러싼 스코프를 불필요하게 오염시키지 않는다.

 

선언문과 표현식을 구분하기

function 이 구문에서 어디에 위치하는지로 판단

함수 선언문의 경우 function이 구문의 시작 위치에 있다.

 

 

익명함수 표현식

setTimeout(function(){
	console.log('aaa');
}, 1000);

function 에 이름이 없는 익명함수 표현식

익명함수 표현식 단점은 스택 추적시 표시할 이름이 없어 디버깅이 어렵다는 것이다.

 

함수 표현식에 이름 사용하기

setTimeout(function timeHandler(){
	console.log('hi');
}, 1000);

 

함수 표현식 즉시호출

(function foo(){})()

 

마지막에 붙인 () 로 함수를 실행할 수 있다.

즉시 호출 함수 표현식 IIFE 

 

IIFE

Immediately 즉시

Invoked 호출

Function 함수

Exporession 표현식

 

IIFE를 기명으로 사용하면 익명 함수 표현식 사용보다 더 나은 면이 있다.

기명 IIFE를 사용하자.

var a = 2;

(function IIFE(){
	var a = 3;
    console.log(a); //3
})();

console.log(a); //2

 

var a = 2;

(function IIFE(global){
	var a = 3;
    console.log(a); //3
    console.log(global.a); //2
})(window);

console.log(a); //2

window 객체 참조를 global이라 이름 붙인 인자에 넘겨서 글로벌 참조와 비글로벌 참조 사이에 명확한 차이를 만든다.