Notice
Recent Posts
Recent Comments
Link
ORANGEE
자바스크립트 클로저(Closure) 쉽게 이해하기 본문
## 클로저란 무엇인가?
자바스크립트에서 클로저(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로 감싸야 함
클로저는 자바스크립트에서 매우 강력한 기능이다.
코드의 구조를 더 유연하게 만들고, 변수의 접근을 제어할 수 있는 중요한 개념이므로 꼭 익혀두자!
'CODE' 카테고리의 다른 글
| 자바스크립트 배열 메서드 핵심 정리 (map, filter, reduce) (0) | 2025.04.03 |
|---|---|
| 자바스크립트 클로저 완전 정복 (0) | 2025.04.03 |
| 자바스크립트 이벤트 루프 완벽 가이드 (0) | 2025.04.03 |
| 자바스크립트 이벤트 루프 완벽 이해하기 (0) | 2025.04.03 |
| 자바스크립트 호이스팅(Hoisting) 완전 정리 (0) | 2025.04.03 |