Closure

클로져함수의 사용 이유

전역변수로 선언하면 변수이름이 충돌될 수 있고, 외부에서 접근못하게 값을 보호할 필요가 있음.

var cnt = 0; //전역변수라 변수이름 충돌가능성. 외부에서 접근 가능. 값의 보호가 필요하다.

function increseCnt() {
cnt++;
}

increaseCnt();
increaseCnt();
increaseCnt();
console.log(cnt); //3

 

지역변수로 선언시, 변수가 보호되지만 매번 0으로 초기화된다.

function increaseCnt() {
var cnt2=0; //지역변수. 범위(스코프)는 좁아졌으나 매번 0으로 초기화된다

cnt2++;
console.log(cnt2);
}

increaseCnt();
increaseCnt();
increaseCnt();

//console.log(cnt2); //에러

 

변수를 지역 변수로 하고, 내부함수로 변경시 내부함수기에 외부에서 호출이 불가능하다.

function closure() {
var cnt = 0;

function increaseCnt() {
cnt++;
sonsole.log(cnt);
}

increaseCnt();
increaseCnt();
increaseCnt();
}

closure();
//increaseCnt(); //에러

 

내부의 함수를 반환하여, 외부에서 호출 할 수 있도록 변경한다.

  function closure(){
var cnt = 0;
return function () {
cnt++;
console.log(cnt);
};
}
var increaseCnt = closure();

increaseCnt();
increaseCnt();
increaseCnt();

 

만약  콜백 함수가 외부 변수를 사용한다면 의도와 다른 결과를 얻게 된다.

for(var i =0; i <3; i++){
setTimeout(function(){alter(i);},0);
}

위와 같은 경우 0,1,2가 아니라 3,3,3이라는 결과가 출력된다 이때 var 대신 let을 사용함으로 써 해결이 가능하다.

또는 콜백함수를 클로져로 변경히 올바른 결과를 얻는다.

for(var i=0; i< 3; i++){

setTimeout(function () {alert(x);},0);

})(i);

}

 

다른 방법으로는 배열과 forEach()를 사용한다.

[0,1,2].forEach(function(i) {

setTimeout(functiopn() {alter(i);},0);

});