[Javascript] 함수가 기억을 한다고? 자바스크립트 클로저 쉽게 설명해봄

JS의 클로저에 대해서 알아보자

 

---

 

 

 

✅ 한 줄 정의

클로저는 함수가 자신이 선언될 때의 스코프(변수 환경)를 기억하고, 그 외부 함수가 종료된 이후에도 그 변수들에 접근할 수 있는 함수.

 

 

 

 

728x90

 

 

 

 

📌 기본 예시

 

function outer() {
  let count = 0; // outer의 지역 변수

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

const counter = outer(); // outer는 실행되고 종료됨, 하지만 inner는 리턴됨
counter(); // 1
counter(); // 2
counter(); // 3

 

outer() 실행 시, count 변수와 함께 inner() 함수가 생성됨.
inner()는 count에 접근하는데, outer() 실행이 끝나도 count를 기억함 → 이것이 클로저!

 

 

 

 

📦 클로저의 특징

 

특징	설명
스코프 기억	함수가 외부 함수의 지역 변수에 접근할 수 있음
캡슐화	외부에서 직접 접근 못 하고 함수로만 조작 가능
상태 유지	상태(예: count)를 유지하며 누적 가능

 

 

 

 

✅ 실전 활용 예

 

✅ 1. private 변수처럼 쓰기

function createCounter() {
  let count = 0;
  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count--;
      return count;
    }
  };
}

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

 

 

 

 

✅ 2. 이벤트 핸들러에서 사용

function setupButton() {
  let clicked = 0;
  document.getElementById("btn").onclick = function () {
    clicked++;
    console.log(`Clicked ${clicked} times`);
  };
}

 

 

 

 

⚠️ 주의할 점

클로저가 많아지면 메모리를 계속 점유할 수 있음 (가비지 컬렉션 되지 않음).
순환 참조, 과도한 유지가 있을 경우 메모리 누수 가능.