JavaScript 클로저 쉽게 이해하기

클로저를 한 줄로: 함수가 자신이 생성된 환경(변수)을 기억하는 것

function makeCounter() {
  let count = 0;  // 이 변수가 "기억"됨
  
  return function() {
    count++;       // 외부 함수의 count에 접근
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
// count 변수가 사라지지 않고 유지됨!

실전 활용:

// 1. 데이터 은닉 (private 변수)
function createUser(name) {
  let _name = name;  // 외부 접근 불가
  return {
    getName: () => _name,
    setName: (n) => { _name = n; }
  };
}

// 2. 이벤트 핸들러
for (let i = 0; i < 5; i++) {
  button[i].onclick = () => alert(i); // let은 블록 스코프라 OK
}

클로저 = 함수 + 그 함수가 선언된 렉시컬 환경