자바스크립트 클로저(Closure)의 개념과 실전 활용 예제

자바스크립트를 공부하다 보면 반드시 마주하게 되는 개념 중 하나가 **클로저(Closure)**입니다. 클로저는 함수형 프로그래밍의 핵심이자, 자바스크립트의 유연하고 강력한 기능을 가능하게 하는 중요한 요소입니다. 이 글에서는 클로저의 정의부터 실전 예제까지 자세히 설명합니다.

---

✨ 클로저란?

클로저는 함수가 선언될 당시의 외부 변수 환경(스코프)을 기억하여, 함수 외부에서 해당 변수에 접근할 수 있는 기능을 말합니다.

즉, 함수가 **자신이 선언된 렉시컬 환경(Lexical Environment)**을 기억하고, 그 환경에 있는 변수에 접근할 수 있게 해줍니다.

---

🔍 가장 기본적인 예시

function outer() {
  const name = "Alice";
  function inner() {
    console.log(name); // outer의 지역 변수에 접근
  }
  return inner;
}

const closureFunc = outer();
closureFunc(); // "Alice"

• inner 함수는 outer 함수의 변수 name을 참조하고 있습니다.
• outer()가 호출되어 종료된 이후에도, closureFunc는 name 변수에 접근할 수 있습니다.

---

💡 왜 클로저가 유용할까?

1. 데이터 은닉
2. 상태 유지
3. 함수형 프로그래밍 구현
4. 콜백과 비동기 처리에 활용

---

📦 실전 예제 1: 상태 유지용 카운터

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  }
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

• count 변수는 외부에서 직접 접근할 수 없지만, counter()를 통해 상태를 유지하며 업데이트할 수 있습니다.

---

📦 실전 예제 2: 이벤트 핸들러에서 클로저

function setupButton(id) {
  let clickCount = 0;
  document.getElementById(id).addEventListener("click", function() {
    clickCount++;
    console.log(`${id} 버튼 클릭 횟수:`, clickCount);
  });
}

setupButton("submitBtn");

• 각 버튼의 클릭 횟수를 개별적으로 추적할 수 있는 구조입니다.
• clickCount는 외부에서 접근할 수 없고, 클로저를 통해만 관리됩니다.

---

⚠️ 주의할 점

• 클로저는 함수 실행 컨텍스트를 메모리에 유지시키므로 불필요한 사용 시 메모리 누수의 원인이 될 수 있습니다.
• 필요하지 않은 변수는 클로저 외부로 유지하지 않도록 주의해야 합니다.

---

✅ 결론

클로저는 자바스크립트의 유연한 설계와 함수 중심 프로그래밍을 가능하게 하는 강력한 기능입니다. 데이터 은닉, 상태 유지, 비동기 처리 등에 널리 사용되며, 실제 프로젝트에서도 매우 유용하게 활용됩니다. 클로저의 동작 원리와 예제를 충분히 익혀두면 자바스크립트에 대한 이해도가 한층 더 깊어질 것입니다.