JavaScript 클로저 쉽게 이해하기 및 절대 까먹지 않기
JavaScript 클로저, 분명 예전에 공부했었는데 공식 문서나 다른 글에서 이 단어를 다시 마주치면 그게 뭐였는지 잘 기억이 나지 않습니다. 저만 그럴지는 모르겠지만, 저는 이상하게 이 개념이 머릿속에 잘 남지 않더군요.
“어… 이게 뭐였지?”
이대로라면 후배 개발자가 물어보거나 면접에서 관련 질문이 나왔을 때 꼼짝없이 망신을 당할 것 같습니다.
왜 그 당시에는 나름 이해하고 넘긴 것 같은데 시간이 지나면 자꾸 까먹을까요? 그건 아마도 정의만 외우고 넘어갔기 때문일 겁니다.
이 글에서는 JavaScript 클로저를 절대 잊지 않도록 아주 쉽게 설명하고, 기억에 확실히 각인시켜 보겠습니다.
JavaScript 클로저, 이렇게 기억하면 절대 안 잊어버립니다.
클로저를 한 줄로 정의하면 이것입니다.
“자기만의 값을 기억하는 함수”
조금 더 쉽게 풀어보면 이렇게도 말할 수 있죠.
“자기 안에 데이터를 숨겨서 간직하는 함수”
즉, JavaScript 클로저는 기억력을 가진 함수입니다.
가장 쉬운 예제로 이해하기
백문이 불여일견, 코드로 보면 바로 이해됩니다.
function createCounter() {
let count = 0;
return function () {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
여기서 신기한 점이 하나 있습니다.
createCounter()함수는 이미 실행이 끝나고 사라졌습니다.- 그런데
count라는 변수는 사라지지 않았습니다. counter()를 부를 때마다count가 계속 늘어납니다.
도대체 왜일까요?
반환된 내부 함수가
count를 기억하고 있기 때문입니다.
이 현상이 바로 클로저(Closure)입니다.
변수는 안 보이는데, 값은 살아 있다.
밖에서는 count를 직접 볼 수도, 건드릴 수도 없습니다.
console.log(counter.count); // undefined
하지만 함수 안에서는 이렇게 멀쩡히 살아 숨 쉽니다.
counter(); // 4 counter(); // 5
정리하자면, “값은 외부로부터 숨겨져 있는데, 함수는 그 값을 계속 쓰고 있는” 이 은밀한 구조가 클로저의 핵심입니다.
이렇게 비유하면 절대 안 잊습니다. (핵심!)
클로저는 이런 느낌으로 상상해 보세요.
“자기만의 가방을 메고 다니는 함수”
함수가 등 뒤에 가방을 하나 메고 있고, 그 안에는 중요한 숫자, 설정값, 이전 기록 같은 것들이 들어 있습니다.
그리고 그 가방은 오직 그 함수만 열 수 있습니다.
그래서 ‘객체처럼 동작하는 함수’라고도 합니다.
이 함수는:
- 내부에 데이터를 보관하고 있고
- 외부에서 그 데이터를 직접 조작하지 못하게 막고
- 오직 자신을 통해서만 값이 바뀝니다.
이 모습, 어디서 많이 본 것 같지 않나요? 마치 데이터를 품고 있는 Java의 ‘객체(Object)’와 매우 비슷합니다. 그래서 많은 개발자가 클로저를 “객체처럼 행동하는 함수”라고 설명하기도 합니다.
실무에서는 언제 쓰일까?
실제 개발에서는 보통 이런 상황에서 사용합니다.
- 클릭 횟수 카운팅
- API 호출 횟수 제한 (Throttling/Debouncing)
- 캐싱 (이전 결과값 저장)
function createClickCounter() {
let clicks = 0;
return function () {
clicks++;
console.log(clicks + '번 클릭했습니다.');
};
}
이 함수는 “내가 몇 번 실행됐는지”를 스스로 기억합니다. 전역 변수를 쓰지 않고도 상태를 유지할 수 있는 가장 깔끔한 방법입니다.
JavaScript 스코프와 클로저의 관계
JavaScript 클로저는 함수가 자기가 만들어진 위치의 변수를 기억하는 성질 때문에 생깁니다.
이 개념은 Mozilla 공식 문서에 잘 설명되어 있습니다.
👉 https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
핵심은 이것입니다.
함수는 만들어질 때의 주변 환경을 함께 기억합니다.
그래서 함수가 끝났는데도
그때의 변수가 계속 살아 있는 것입니다.
왜 JavaScript 클로저를 자꾸 까먹을까?
대부분 이렇게 외웠기 때문입니다.
“외부 함수의 변수를 참조하는 내부 함수”
이 문장은 맞지만,
사람 머리에 안 남습니다.
대신 이렇게 기억해야 합니다.
“JavaScript 클로저는 자기만의 값을 기억하는 함수다.”
JavaScript 클로저는 너무 많이 쓰면 안 좋을 수도 있습니다.
JavaScript 클로저는 메모리에 값을 계속 붙잡기 때문에, 오래 살아 있는 이벤트나 타이머 안에서 무분별하게 만들면 메모리가 쌓일 수 있습니다.
하지만 일반적인 웹 개발에서는 이로 인해 문제가 생기는 경우는 거의 없습니다.
마무리: 이 한 문장만 기억하세요
JavaScript 클로저는, 자기만의 데이터를 가방에 담아 계속 들고 다니는 함수입니다.
이 문장만 기억해도
클로저는 절대 헷갈리지 않습니다.
