lexical-scopestate

closure를 설명해 주세요

예상 시간
7분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

closure는 왜 외부 함수 실행이 끝나도 변수를 기억하나요?

부가 설명

function createCounter() {
  let count = 0;
 
  return function increase() {
    count += 1;
    return count;
  };
}
 
const counter = createCounter();
 
counter(); // 1
counter(); // 2

createCounter 실행은 끝났지만, 반환된 increase 함수는 count에 계속 접근합니다. increase가 선언될 때의 lexical scope를 기억하고 있기 때문입니다.

closure는 단순히 “함수 안의 함수”가 아닙니다. 내부 함수가 외부 scope의 값을 참조하고, 그 참조가 함수 실행 이후에도 살아 있는 상황을 봐야 합니다.

closure는 React hook이나 event handler를 이해할 때도 자주 등장합니다. 예를 들어 callback은 만들어진 시점의 state 값을 기억할 수 있습니다. 그래서 오래된 값을 바라보는 stale closure 문제가 생기기도 합니다.

Closure는 상태 은닉이나 callback 구성에 유용하지만, 메모리 관점의 주의점도 있습니다. 필요 없는 참조를 오래 잡고 있으면 garbage collection 대상이 되지 못할 수 있습니다.

한 줄 정리

closure는 함수가 선언된 당시의 scope를 기억해서 외부 함수 실행 이후에도 그 변수에 접근할 수 있게 해주는 특성입니다.