[javascript] 클로저(closure)에 대해 알아보자

개념

어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상을 말한다.

원리

개념만 놓고 보았을 때 이해가 잘 가지 않음으로 예제를 이용해 설명해 보도록 하겠다.

const A = function () {
	let a = 1;
    const B = function () {
    	return ++a;
    }
    return B;
  };
  
const copyA = A();
  
for (let i = 0; i < 3; i++) {
 console.log(copyA()); // 2 3 4
}

 

이전에 실행컨텍스트에 의하면 한번 호출했던 함수의 경우 해당 함수가 종료되면 관련 된 변수들도 같이 GC(가비지 콜렉터)에 의해 소거가 되었었다.

하지만 다음과 같은 경우에는 a의 값이 계속 남아 2 3 4처럼 하나씩 증가 되는 값을 console log를 통해 확인 할 수 있었다.

예제를 확인해보면 내부함수를 외부로 전달 하였을 때 컨텍스트가 종료 된 이후에도 변수는 사라지지 않는 것을 보여준다. 왜냐하면 copyA가 A함수를 호출하면서 내부함수 B를 참조하게 되었기 때문이다.

GC 특성 상 더이상 사용하지 않는 변수를 수거하지만 copyA가 B를 참조하면서 B내부에 있는 a 변수를 계속해서 참조를 하게 되었다. 그로인해 A함수 실행 완료 후 A함수가 실행컨텍스트에서 제거 되어야하지만 변수 a를 사용한 B 함수에 의해 A 함수의 변수 a는 제거되지 않고 남아있게 된다.

 

클로저의 개념을 다시 설명하게 되면 내부함수 B가 Lexical Environment(자신이 실행되었을 때의 환경)를 기억하는 함수이다.

 

사용 예시

클로저의 경우 잘 못 사용할 경우 데이터가GC에 수거 되지 못하고 메모리누수 현상이 일어날 수 있지만. 클로저를 사용하게 되면 가질 수 있는 장점들이 있기 때문에 메모리 누수문제만 해결 할 수 있다면 클로저를 사용하는 것이 좋다.

• 현재 상태에 대한 정보를 유지해야 하는 경우
• class처럼 사용하고 싶을 때
  • 정보의 은닉화

Reference

코어 자바스크립트

https://poiemaweb.com/js-closure