[javascript] 클로저를 사용하여 함수의 상태 저장하기

08 Dec 2023

javascript

JavaScript에서 클로저는 함수와 그 함수가 접근할 수 있는 주변 상태(변수)를 기억할 수 있는 기능을 제공합니다. 이를 활용하면 함수가 호출될 때 상태 정보를 유지하고 활용할 수 있습니다.

클로저 개념 이해하기

클로저는 함수 내에 중첩된 함수에서 외부 함수의 변수에 접근할 수 있는 구문입니다. 이는 함수가 만들어질 때 주변 상태를 기억하고 있다는 의미입니다.

아래는 간단한 클로저의 예시입니다.

function outerFunction() {
  let count = 0;

  return function innerFunction() {
    count++;
    return count;
  };
}

const increment = outerFunction();
console.log(increment()); // 1
console.log(increment()); // 2

outerFunction은 innerFunction을 반환합니다. innerFunction은 count를 참조하고 증가시키는 클로저입니다. 여기서 outerFunction의 count 변수 상태가 innerFunction에 의해 참조되고 유지됩니다.

클로저를 사용한 함수 상태 유지하기

클로저를 사용하여 함수의 상태를 유지하면 유용한 기능을 구현할 수 있습니다. 예를 들어, 특정 값을 기억하고 다음 호출 시에 그 값에 기반하여 작업을 수행하는 함수를 구현할 수 있습니다.

아래는 클로저를 사용하여 이전 값에 기반하여 현재 값과의 차이를 계산하는 함수의 예시입니다.

function differenceCalculator() {
  let lastValue = 0;

  return function calculateDifference(newValue) {
    const difference = newValue - lastValue;
    lastValue = newValue;
    return difference;
  };
}

const calcDiff = differenceCalculator();
console.log(calcDiff(5)); // 5
console.log(calcDiff(8)); // 3
console.log(calcDiff(20)); // 12

differenceCalculator 함수는 lastValue 변수와 함께 calculateDifference 함수를 반환합니다. calculateDifference 함수는 이전 값과의 차이를 계산하고, lastValue 변수를 업데이트합니다.

이처럼 클로저를 사용하여 함수의 상태를 유지하면 상태를 계속해서 변경하고 기억할 수 있는 효과적인 방법을 제공합니다.

결론

클로저를 사용하여 함수의 상태를 유지하면 함수가 호출될 때 상태 정보를 계속해서 저장하고 활용할 수 있습니다. 이를 통해 유연하고 강력한 함수를 정의하고 활용할 수 있습니다.

참고 문헌:

MDN Web Docs: Closures