자바스크립트 클로저 이해: 스코프 마법의 비밀

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보자 및 중급자 자바스크립트 개발자

난이도: 중간 (스코프 및 함수 개념 이해 필요)

핵심 요약

• 클로저는 외부 함수의 스코프를 기억하는 내부 함수로, 외부 함수가 실행된 후에도 변수에 접근 가능
• outer() 실행 후 inner()가 count 변수에 접근하는 예제는 클로저의 대표적 활용
• let i 사용 시 루프 내 setTimeout에서 정확한 값 출력 가능 (변수 스코핑 문제 해결)

섹션별 세부 요약

1. 클로저 정의 및 기초 예제

• 클로저는 lexical scope의 변수를 유지하는 함수
• function outer()에서 정의된 count 변수가 inner() 함수 내에서 참조됨
• counter() 호출 시 count 값이 1, 2, 3으로 증가 (외부 함수 종료 후도 변수 유지)

2. 클로저의 활용 예시: 비밀 관리

• createSecret() 함수에서 secret 변수를 외부에서 접근 불가하게 유지
• getSecret() 및 setSecret() 메서드를 통해 값 읽기/수정 가능 (캡슐화 기법)

3. 클로저 기반 함수 생성 예제

• multiplier(factor) 함수가 factor 값을 기억하는 double 클로저 생성
• double(5) 실행 시 factor = 2로 인해 10 반환

4. 루프 내 클로저의 함정

• var i 사용 시 setTimeout에서 i 값이 3으로 고정 (변수 스코핑 문제)
• let i 사용 시 i 값이 0, 1, 2로 정확히 출력 (블록 스코프 활용)

5. 클로저의 실무적 활용

• 콜백, 이벤트 핸들러, React 훅, 프라이빗 상태 관리 등에서 널리 사용
• React hooks 및 모듈 패턴에서 클로저 기반 상태 관리 핵심

결론

• 루프에서 let 사용으로 클로저 문제 해결, const로 불변성 강조
• React 훅 및 모듈 패턴에서 클로저 기반 상태 관리 활용
• 클로저는 JavaScript의 핵심 개념으로, 메모이제이션, 커링 등 고급 패턴 구현에 필수적