자바스크립트 면접 단골 질문, 클로저

자바스크립트 기본 문법을 공부한 후 중급 레벨로 진입할 때 가장 먼저 통과해야 하는 관문이 바로 클로저입니다. 문법적 암기가 아닌 자바스크립트의 내부 실행 메커니즘을 토대로 클로저의 개념을 명쾌하게 파헤쳐 봅니다.

클로저의 쉬운 정의

클로저는 "함수가 선언된 당시의 주변 환경(렉시컬 스코프, Lexical Scope)을 기억하여, 해당 스코프 밖에서 호출되더라도 그 환경에 있는 변수에 계속 접근할 수 있는 함수"를 뜻합니다.

자바스크립트는 내부 함수가 외부 변수를 참조하고 있을 경우, 외부 함수의 실행 컨텍스트가 생명 주기를 마감하고 콜 스택에서 해제되어도 내부 스코프 상태 변수를 가비지 컬렉터(GC)에서 제거하지 않고 메모리에 온전히 보관합니다.

실무에서의 핵심 활용: 캡슐화와 정보 은닉

클로저를 활용하면 클래스의 private 지시어처럼 외부에서 특정 변수를 직접 제어하지 못하도록 캡슐화할 수 있습니다. 예를 들어 상태 업데이트 함수를 내부적으로 캡슐화한 카운터 팩토리 함수를 만들어 호출하면, 오직 지정된 통로 함수를 통해서만 변수의 변화를 허용하여 버그 없는 안전한 상태 설계가 가능해집니다.

클로저를 디버깅할 때 보는 것

클로저는 강력하지만, 의도치 않게 오래 살아남는 참조를 만들면 메모리 문제로 이어질 수 있습니다. 특히 이벤트 리스너, 타이머, 캐시 함수에서 외부 변수를 붙잡는 구조는 주기적으로 점검해야 합니다.

실무 활용 예시

  • 팩토리 함수로 내부 상태를 감추고, 정해진 메서드로만 변경하게 만들 수 있습니다.
  • 디바운스와 스로틀 함수는 이전 타이머 값을 클로저로 기억해 입력 이벤트를 제어합니다.
  • React 훅에서 오래된 상태를 참조하는 문제도 클로저 관점으로 이해하면 원인을 찾기 쉽습니다.

클로저를 잘 쓴다는 것은 변수를 숨기는 기술보다 생명 주기를 명확히 설계하는 일에 가깝습니다.

참고 자료와 업데이트 기준

이 글은 실무 적용 관점에서 작성했으며, 관련 기술의 공식 문서와 브라우저 지원 현황이 바뀌면 내용을 다시 점검합니다. 특히 프레임워크 버전, API 정책, 성능 측정 방식은 시간이 지나며 달라질 수 있으므로 배포 전에는 최신 문서를 함께 확인하는 것을 권장합니다.

  • MDN Web Docs에서 웹 표준과 브라우저 동작을 확인합니다.
  • web.dev에서 성능, 접근성, 사용자 경험 기준을 확인합니다.
  • React 공식 문서에서 React 관련 API와 권장 패턴을 확인합니다.