자바스크립트 클로저(Closure) 쉽게 이해하기 | ORANGEE

Light

Dark

클로저란 무엇인가?

자바스크립트에서 클로저(Closure)는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다.
간단히 말하면, 외부 함수의 변수에 접근할 수 있는 내부 함수를 의미한다.

🔍 기본 예제

function outer() {
  let count = 0;

  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2

inner()는 outer()의 변수인 count에 접근 가능
outer()는 이미 종료되었지만, count는 여전히 살아있음 → 이것이 클로저

🧠 왜 클로저를 쓸까?

데이터 은닉(캡슐화): 외부에서 직접 변수에 접근하지 못하게 막을 수 있음
상태 유지: 함수 실행 후에도 변수 상태를 기억함
콜백 함수/이벤트 핸들러에 유용: 변수 상태를 유지하면서도 독립적으로 동작

⚠️ 주의할 점

클로저가 참조하는 변수는 GC(가비지 컬렉션) 대상이 아니기 때문에 메모리 누수 주의
반복문 안에서의 클로저 사용 시, 의도치 않은 결과를 만들 수 있음

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 항상 3 출력
  }, 1000);
}

→ var 대신 let을 쓰거나, IIFE로 감싸야 함

클로저는 자바스크립트에서 매우 강력한 기능이다.
코드의 구조를 더 유연하게 만들고, 변수의 접근을 제어할 수 있는 중요한 개념이므로 꼭 익혀두자!