클로저란 무엇이고, 어떻게 활용하는지 설명할 수 있나요?
함수가 자신이 선언된 렉시컬 환경을 기억하는 클로저의 원리와 데이터 은닉·상태 유지 활용을 정리합니다.
클로저는 함수가 자신이 선언될 때의 렉시컬 환경(스코프)을 기억해, 바깥 함수가 끝난 뒤에도 그 변수에 계속 접근할 수 있는 것을 말합니다. 렉시컬 스코프와 일급 함수가 결합해 만들어지는 자바스크립트의 핵심 개념입니다.
기본 원리
function makeCounter() {
let count = 0; // 바깥 함수의 지역 변수
return function () {
count += 1; // 안쪽 함수가 바깥 변수를 참조
return count;
};
}
const counter = makeCounter();
counter(); // 1
counter(); // 2 — makeCounter는 이미 끝났지만 count가 살아 있음보통 함수가 끝나면 지역 변수는 사라집니다. 하지만 안쪽 함수가 count를 참조하고 있어, 그 환경이 메모리에 유지됩니다. 반환된 counter가 count를 “닫아서 안고 있는” 셈이라 클로저라 부릅니다.
활용 1: 데이터 은닉(private 변수)
클로저로 외부에서 직접 접근할 수 없는 변수를 만들 수 있습니다.
function createAccount() {
let balance = 0; // 외부에서 직접 접근 불가
return {
deposit(amount) {
balance += amount;
},
getBalance() {
return balance;
},
};
}
const acc = createAccount();
acc.deposit(100);
acc.getBalance(); // 100
// acc.balance → undefined (직접 접근 불가)활용 2: 상태 유지와 함수 팩토리
function multiplier(factor) {
return (n) => n * factor; // factor를 기억
}
const double = multiplier(2);
const triple = multiplier(3);
double(5); // 10
triple(5); // 15리액트의 useState나 디바운스/스로틀 구현도 클로저로 상태(이전 값, 타이머 ID)를 유지합니다.
주의: 반복문과 var
var는 함수 스코프라 반복문에서 클로저와 함께 쓰면 의도와 다르게 동작합니다. let(블록 스코프)을 쓰면 반복마다 새 바인딩이 생겨 해결됩니다.
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0); // 3, 3, 3
}
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0); // 0, 1, 2
}클로저에 대한 설명으로 옳은 것은?
이 레슨을 다 읽으셨나요?
완료 표시는 이 브라우저에 저장됩니다.