JS) 클로저(closure)

외부함수와 내부함수

위 사진에서 함수 outter 내부에 있는 함수 inner를 내부함수 라고합니다.

내부함수는 외부함수의 지역변수에 접근할 수 있습니다.

클로저

• 내부함수가 외부함수의 지역 변수와 같은 맥락(context)에 접근할 수 있는 것.
• 함수 내부에 함수를 작성할 때 내부에 작성된 함수는 클로저.

function outter(){ 
    var title = 'closure';
    return function(){ 
        alert(title); 
    }
}
inner = outter(); // 외부함수 return 값을 inner 변수에 담음.
				  // 즉, 내부함수를 inner 변수에 담음.
inner();          // inner변수에 담긴 함수를 호출 시 alert(title) 구문 실행됨.

outter 함수는 내부함수를 리턴했으므로 소멸되지만 내부함수는 외부함수의 변수에 접근이 가능하다.

• 즉, 외부함수가 더이상 사용되지 않는 경우에도 내부함수가 외부함수에 접근할 수 있다.

• 외부함수는 클로저를 생성하는 팩토리 함수다. (객체를 생성하는 공장)

카운터 함수를 만드는 함수

function makeCounter(){
    var count = 0;
    return function(){ // 내부함수
        return count ++;
    }
}

var counter = makeCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

1. 외부함수 makeCounter는 중첩 함수인 내부 함수의 참조를 반환함.
2. 내부함수는 외부 함수 makeCounter의 지역 변수 count를 참조함.

변수 count는 클러저의 내부 상태로서 저장됨.

클로저의 내부 상태(외부 함수의 지역 변수)는 외부로부터 은폐되어 있으며 중첩 함수안에서만 읽거나 쓸 수 있음.

2개의 카운터 함수 생성

function makeCounter(){
    var count = 0;
    return function(){
        return count ++;
    }
}

var counter1 = makeCounter();
var counter2 = makeCounter();
console.log(counter1()); // 0
console.log(counter2()); // 0
console.log(counter1()); // 1
console.log(counter2()); // 1

makeCounter()를 실행해서 counter1, counter2 두개의 함수를 생성해 보면
모두 별도의 카운터가 됩니다. 그래서 각 클로저는 서로 다른 내부 상태를 저장합니다.