JavaScript 클로저를 이용한 카운터
앞서 살펴본 코드를 반환된 함수가 매번 변수 num의 값을
1씩 증가시키도록 다시 작성해 봅시다:
function test() {
let num = 1;
return function() {
console.log(num);
num++; // 1을 더함
}
}
let func = test();
그러면 함수 func를 호출할 때마다
콘솔에 새로운 값을 출력하게 됩니다:
function test() {
let num = 1;
return function() {
console.log(num);
num++;
}
}
let func = test();
func(); // 1 출력
func(); // 2 출력
func(); // 3 출력
func(); // 4 출력
func(); // 5 출력
결과적으로 우리는 클로저(정확히는 함수의 클로저에 있는
변수 num를 이용하여)를 사용하여 함수 호출 카운터를
구현했습니다.
함수 test를 호출할 때마다 자신만의 클로저를 가진
새로운 함수가 반환된다는 점에 유의하세요. 즉, 서로 다른 카운터는
독립적으로 작동합니다:
function test() {
let num = 1;
return function() {
console.log(num);
num++;
};
}
let func1 = test(); // 첫 번째 카운터
func1(); // 1 출력
func1(); // 2 출력
let func2 = test(); // 두 번째 카운터
func2(); // 1 출력
func2(); // 2 출력
결국 같은 변수 num가 서로 다른 함수에 대해
서로 다른 값을 가지게 됩니다!
즉, 함수 test를 두 번 호출하면, 그로부터 얻은 함수들은
독립적으로 작동하며 각 함수는 자신만의 독립적인 변수 num를
갖게 됩니다.
제 코드를 보지 말고, 클로저를 이용하여 함수 호출 카운터를 직접 구현해 보세요.
함수가 클로저 안에 숫자 10을 저장하도록 하세요.
함수가 호출될 때마다 이 숫자를 1씩 감소시키고
감소된 숫자를 콘솔에 출력하도록 만드세요.
이전 문제를 수정하여 카운트다운이 0에 도달한 후,
이후의 모든 함수 호출은 콘솔에 카운트다운이 끝났다는
메시지를 출력하도록 하세요.