javascript 클로저 예제 및 쓰는 이유

 

클로저
상태를 안전하게 변경하고 유지하기 위해 사용한다.

다시말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.

 

변수 값은 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있다.

외부 상태 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에서 부수효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이기 위해 클로저는 적극적으로 사용된다.

 

아래는 함수형 프로그래밍에서 클로저를 활용하는 간단한 예제다.

// 함수를 인수로 전달받고 함수를 반환하는 고차 함수
// 이 함수는 카운트 상태를 유지하기 위한 자유 변수 counter를 기억하는 클로저를 반환한다.

function makeCounter(aux) {
	// 카운트 상태를 유지하기 위한 자유 변수
	let counter = 0;
    
    // 클로저를 반환
    return function () {
    	// 인수로 전달받은 보조 함수에 상태 변경을 위임한다.
    	counter = aux(counter);
    	return counter;
    };
 }
 
 // 보조 함수
 function increase(n) {
 return ++n;
 }
 
  // 보조 함수
 function decrease(n) {
 return --n;
 }
 
 
 // 함수로 함수를 생성한다.
 // makeCounter 함수는 보조 함수를 인수로 전달받아 함수를 반환한다.

const increaser = makeCounter(increase); 
console.log(increaser()); // 1
console.log(increaser()); // 2

// increaser 함수와는 별개의 독립된 렉시컬 환경을 갖기 때문에 카운터 상태가 연동하지 않는다.
const decreaser = makeCounter(decrease); 
console.log(decreaser()); // -1
console.log(decreaser()); // -2

위 예제에서는 전역 변수 iuncreaser와 decreaser에 할당된 함수는 각각 자신만의 독립된 렉시컬 환경을 갖기 때문에 카운트를 유지하기 위한 자유 변수 counter를 공유하지 않아 카운터의 증감이 연동되지 않는다. 따라서 독립된 카운터가 아니라 연동하여 증감이 가능한 카운터를 만들려면 렉시컬 환경을 공유하는 클로저를 만들어야 한다.

 

이를 위해서는 makeCounter 함수를 두 번 호출하지 말아야 한다.

// 함수를 반환하는 고차 함수
// 이 함수는 카운트 상태를 유지하기 위한 자유 변수 counter를 기억하는 클로저를 반환한다.

const counter = (function () {
    // 카운트 상태를 유지하기 위한 자유 변수
    let counter = 0;
    
    // 함수를 인수로 전달받는 클로저를 반환
    return function (aux) {
        counter = aux(counter);
        return counter;
    };
}());

// 보조 함수
function increase(n) {
	return ++n;
}

// 보조 함수
function decrease(n) {
	return --n;
}

// 보조 함수를 전달하여 호출
console.log(counter(increase)) //1
console.log(counter(increase)) //2

// 보조 함수를 전달하여 호출
console.log(counter(decrease)) //1
console.log(counter(decrease)) //0

 

참고 : 모던 자바스크립트 딥다이브 - 위키북스