[JS] 클로저 사용 사례, 카운터

클로저 사용 사례

다음 코딩은 클로저를 활용한 카운터 함수의 예를 보여주고 있습니다.

클로저 사용 사례

counter 함수는 매개변수로 step을 받으며, 기본값으로 1을 가집니다. 이 함수는 내부에 count라는 변수를 선언하고 0으로 초기화한 다음, increaseCount라는 내부 함수를 반환합니다. increaseCount 함수는 count를 step만큼 증가시키고, 변경된 count 값을 반환합니다.

 

다음은 코드의 핵심 부분입니다.

function counter(step = 1) {
  var count = 0;
  return function increaseCount() {
    count = count + step;
    return count;
  };
}

var incBy1 = counter(1);
var incBy3 = counter(3);

incBy1와 incBy3는 counter 함수로부터 반환된 두 개의 클로저입니다. 각각은 자신만의 독립적인 count 상태를 가지고, incBy1은 step이 1로, incBy3은 step이 3으로 설정되어 있습니다.

incBy1(); // count는 1 증가
incBy1(); // 다시 1 증가
console.log(incBy1()); // 출력: 3, count는 총 3 증가

incBy3(); // count는 3 증가
incBy3(); // 다시 3 증가
incBy3(); // 다시 3 증가
console.log(incBy3()); // 출력: 12, count는 총 12 증가

정리

각각의 클로저 호출은 count를 해당 step만큼 증가시키며, 콘솔에는 마지막으로 호출된 count 값이 출력됩니다. incBy1의 경우 세 번 호출되어 총 3이 되었고, incBy3는 세 번 호출되어 총 12가 되었습니다. 이 예제는 클로저가 각각의 함수 호출 사이에서 상태를 어떻게 유지하는지를 보여줍니다.