클로저

JavaScript의 클로저란?

클로저는 함수가 명시적으로 외부 스코프의 변수를 사용하면서,

해당 변수에 접근 가능하지 않은 다른 스코프에서 실행할 때 관찰되는 함수의 특성이다.

function getCountAdder(){
	let count = 0;
    return function countAdder(){
    	count++;
        console.log(count);
    }
}

let addCount = getCountAdder();
addCount(); // 1
addCount(); // 2
addCount(); // 3

 

위 코드에서 보면, getCountAdder 함수는 countAdder라는 내부 함수 인스턴스를 반환한다.

이 때 반환된 내부함수인 countAdder는 외부 스코프(getCountAdder)에서 count를 참조하는데,

반환된 JS 함수는 이런 외부 스코프의 변수(count)를 close-over하여(감싸서) 참조를 유지한다.

 

따라서 getCountAdder 호출이 종료되면서 getCountAdder 함수 인스턴스가 제거되더라도, 반환된 countAdder 함수 인스턴스가 참조하는 count는 참조가 유지되고 있기 때문에 가비지 콜렉션의 대상이 되지 않는다.

아래 그림은 이러한 동작원리를 표현한다.

 

출처: https://velog.io/@minh0518/%EB%A9%B4%EC%A0%91%EA%B4%80-%EC%95%9E%EC%97%90%EC%84%9C-%ED%81%B4%EB%A1%9C%EC%A0%80-closure%EC%9D%98-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC%EB%A5%BC-%EB%A7%90%ED%95%B4%EB%B3%B4%EC%9E%90

 

위 그림에서 보다시피, 클로저는 외부 스코프에서 참조하는 변수의 snapshot을 저장하는 것이 아니라, live link(직접적인 참조)를 갖고 있다.

 

클로저의 활용

이러한 클로저의 특성을 이용하여, 모듈 패턴 / 콜백 등에 사용되는 것을 자주 볼 수 있다.

 

1. 네트워크, IO 등의 비동기 작업 시 등록하는 콜백, 모듈 패턴에서 외부 스코프의 변수를 참조를 유지하여 사용한다.

2. close-over되는 외부 스코프의 변수를, 다른 스코프에서 직접 접근할 수 없기 때문에 캡슐화의 성질을 구현할 수 있다.

(공개할 내부 함수 인스턴스 등을 반환하고, 숨길 내부 변수나 동작은 참조관계로 두어 그룹화와 가시성 제어)