closure
희원이가 cs 관련 내용을 하나씩 보내주는 메일매일인가? 를 알려주었다. 열심히 가지고 공부해봐야지. 처음은 클로저에 관한 것이였는데, 이거 예시가 너무 적어서 ai로 추가했다.
Closure (클로저)
클로저는 함수가 선언될 당시의 스코프를 기억해서, 함수가 실행되는 시점에도 그 스코프에 접근할 수 있는 것이다.
자바스크립트에서 함수는 일급 객체이고, 렉시컬 스코프(정의된 위치 기준)를 따르기 때문에 클로저가 만들어진다.
기본 동작
function outerFunction(outerVariable) {
return function innerFunction(innerVariable) {
console.log(outerVariable); // 접근 가능
console.log(innerVariable);
};
}
const newFunction = outerFunction('outside');
newFunction('inside');
핵심은 이거다:
outerFunction은 이미 실행 끝남- 그런데도
innerFunction이outerVariable을 계속 참조함
→ outer의 스코프를 기억하고 있기 때문 (클로저)
1. 데이터 은닉 (가장 중요한 활용)
function createCounter() {
let count = 0;
return {
increase() {
count++;
console.log(count);
},
decrease() {
count--;
console.log(count);
},
};
}
const counter = createCounter();
counter.increase(); // 1
counter.increase(); // 2
counter.decrease(); // 1
여기서 중요한 포인트:
count는 외부에서 접근 불가능- 오직
increase,decrease로만 접근 가능
console.log(counter.count); // undefined
→ 상태를 숨기고, 안전하게 관리 가능
2. 상태 유지 (함수 호출 간 값 유지)
function createAdder(x) {
return function (y) {
return x + y;
};
}
const add5 = createAdder(5);
console.log(add5(3)); // 8
console.log(add5(10)); // 15
add5는x = 5를 계속 기억함- 매번 새로 넘기는 게 아니라 함수가 상태를 들고 있음
→ 함수 자체가 값을 기억하는 구조
3. 비동기에서 값 유지
function createLogger(name) {
return function () {
console.log(name);
};
}
const logger = createLogger('MyApp');
setTimeout(logger, 1000);
- 1초 뒤 실행되지만
name값 유지됨
→ 비동기에서도 실행 당시의 값 보존
4. 반복문 + 클로저
문제 코드
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
}, 1000);
}
결과:
3
3
3
이유:
var는 함수 스코프- 클로저가 같은
i를 참조
해결 (클로저 활용)
for (var i = 0; i < 3; i++) {
(function (j) {
setTimeout(() => {
console.log(j);
}, 1000);
})(i);
}
또는
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
}, 1000);
}
→ 각각 독립된 스코프 생성
5. 모듈 패턴
const userModule = (function () {
let username = 'guest';
return {
getUser() {
return username;
},
setUser(name) {
username = name;
},
};
})();
userModule.setUser('john');
console.log(userModule.getUser()); // john
- 내부 변수는 숨기고
- 필요한 기능만 외부에 공개
→ 간단한 모듈 시스템 구현 가능
한 줄 정리
클로저는 “함수가 만들어질 때의 환경(변수)을 계속 기억하는 구조”이고,
이를 통해 상태 유지, 데이터 은닉, 비동기 처리, 모듈화가 가능하다.