javascript closure 완전 정복 가이드: 개념·실무·주의점

javascript closure이 필요한 상황

javascript closure는 내부 함수가 외부 함수의 스코프에 접근해야 하는 상황에서 필요합니다. 이 글에서는 javascript closure의 개념, 실무 적용 예제, 성능·보안·운영상의 주의점, 체크리스트까지 다뤄 실무 웹 개발자가 곧바로 적용할 수 있도록 안내합니다.

javascript closure 핵심 개념

클로저(closure)는 함수와 그 함수가 선언될 당시의 렉시컬 환경(스코프)을 묶은 개념입니다. 간단히 말해, 내부 함수가 외부 함수의 지역 변수를 참조할 때 그 참조를 계속 유지하는 특성입니다. 자주 혼동하는 포인트는 클로저가 "메모리에 변수를 유지한다"는 것이지, 무조건 메모리 누수를 일으킨다는 뜻은 아니라는 점입니다.

스코프 체인: 변수 조회 시 현재 스코프 -> 부모 스코프 순으로 검색됩니다.
렉시컬 스코프: 함수가 선언된 위치가 변수 접근을 결정합니다.

javascript closure 실무 예제

아래 예제는 클로저를 이용해 상태를 은닉하고, 외부에서 안전하게 접근하는 패턴입니다.

// 예제: 상태 은닉된 카운터 팩토리
function createCounter(initial = 0) {
  let count = initial;
  return {
    increment() {
      count += 1;
      return count;
    },
    get() {
      return count;
    }
  };
}

const counter = createCounter(5);
console.log(counter.get()); // 5
console.log(counter.increment()); // 6

실무에서 자주 쓰이는 패턴:

모듈 수준 상태 캡슐화
이벤트 핸들러에서 특정 변수 캡처
비동기 콜백(예: setTimeout, Promise)에서의 값 고정

비동기와 함께 사용할 때 흔히 발생하는 실수 예시:

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 3,3,3 (의도는 0,1,2)
  }, 100);
}

// 해결: let을 사용하거나 즉시 실행 함수 사용
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 0,1,2
  }, 100);
}

언제 쓰면 좋고 언제 피해야 할까

언제 쓰면 좋은가

상태 캡슐화가 필요할 때(모듈화된 유틸, 팩토리 함수)
콜백/이벤트에서 특정 시점의 값을 고정해야 할 때
함수형 스타일로 부수효과를 최소화하면서 상태를 관리할 때

언제 피해야 하는가

불필요하게 긴 수명 주기를 갖는 클로저로 인해 메모리 사용량이 높아질 때
DOM 레퍼런스 같은 큰 객체를 캡처해 장시간 보관할 필요가 있을 때
복잡한 스코프 체인으로 코드 가독성이 급격히 떨어질 때

실무 체크리스트

클로저가 캡처하는 변수 목록을 명확히 확인했는가?
불필요한 외부 참조(특히 DOM, 대용량 객체)를 캡처하고 있지 않은가?
let/const로 블록 스코프를 활용해 의도치 않은 값 캡처를 피했는가?
테스트로 메모리 사용량과 가비지 컬렉션 동작을 확인했는가?
클로저 사용 부분에 주석 또는 문서화가 되어 있는가?

성능·보안·운영 주의점

성능

클로저는 변수를 참조할 때 스코프 체인을 탐색하므로 매우 복잡한 체인은 성능 저하 소지가 있다. 대부분의 경우 무시할 수 있지만, 반복문 내부에 깊은 클로저를 반복적으로 생성하면 비용이 누적될 수 있다.

메모리

클로저는 캡처한 변수를 가비지 컬렉션 대상에서 제외시킬 수 있다. 장기간 유지되는 클로저는 메모리 소비를 증가시킬 수 있으므로 대용량 데이터(예: 대형 배열, DOM 노드)는 캡처하지 않도록 설계한다.

보안

클로저로 숨긴 상태는 완전한 보안 수단이 아니다. 브라우저 콘솔에서 접근 가능하거나 XSS에 취약한 코드라면 노출될 수 있으니 민감한 정보는 클라이언트에 저장하지 않는다.

운영

프로파일링(Chrome DevTools 등)을 통해 함수 할당/해제 패턴을 모니터링하고, 메모리 스냅샷을 통해 의도치 않은 레퍼런스가 남아있지 않은지 확인하라.

비교 기준표

구분	장점	단점	권장 사용 상황
클로저 기반 캡슐화	상태 은닉, API 단순화	장기 유지 시 메모리 증가 가능	모듈 내부 상태 관리, 작은 상태 유지
전역 상태(예: 전역 객체)	구현 단순, 접근 쉬움	네임스페이스 충돌, 테스트 어려움	앱 초기 설정, 공용 상수
상태 관리 라이브러리(Redux 등)	예측 가능한 상태 흐름, 디버깅 용이	보일러플레이트, 러닝커브	복잡한 앱, 많은 컴포넌트 간 상태 공유

자주 묻는 질문

Q: 클로저는 메모리 누수를 유발하나요? A: 클로저 자체가 누수를 일으키지는 않습니다. 다만 장기간 유지되는 클로저가 대용량 객체를 캡처하면 메모리 소비가 커질 수 있어 주의해야 합니다.

Q: 화살표 함수는 일반 함수와 클로저 동작이 다른가요? A: 화살표 함수는 렉시컬 this 바인딩을 사용하지만, 클로저로서 외부 스코프 변수 캡처 동작은 동일합니다. this 참조 방식 차이를 인지하고 사용하세요.

Q: 비동기 콜백에서 클로저를 안전하게 사용하려면? A: let/const를 사용하거나 즉시 실행 함수(IIFE)로 값을 고정하세요. Promise/async-await를 사용하면 가독성과 예측성이 높아집니다.

Q: 클로저 대신 어떤 패턴을 고려할까요? A: 필요에 따라 상태 관리 라이브러리, 클래스 기반 캡슐화, 혹은 단순한 모듈 패턴을 고려할 수 있습니다. 선택 기준은 상태 크기, 수명 주기, 테스트 용이성입니다.

정리

javascript closure는 함수와 선언 시 스코프를 묶어 상태를 은닉하고 캡처를 가능하게 한다.
실무에서는 상태 캡슐화, 이벤트 캡처, 비동기 값 고정에 유용하다.
메모리·성능·보안 관점에서 캡처되는 변수를 최소화하고 프로파일링으로 검증하라.
체크리스트를 통해 캡처 변수, 참조 객체, 테스트 가능성을 점검하라.
언제 쓰고 언제 피해야 하는지 기준을 명확히 해 코드 유지보수성을 높여라.