[javascript] 클로저를 사용한 상태 변경 추적

08 Dec 2023

javascript

자바스크립트에서 클로저를 사용하면 상태 변경을 추적하고 관리할 수 있습니다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합으로, 함수가 생성될 때의 외부 변수에 대한 참조를 유지합니다.

클로저란 무엇인가?

클로저는 함수가 선언될 때의 외부 변수에 대한 참조를 유지하는 함수와 해당 함수가 선언될 때의 렉시컬 환경의 조합입니다. 이러한 특성은 함수가 선언될 때의 외부 상태를 유지하고, 함수 내부에서 그 상태를 변경하거나 사용할 수 있도록 합니다.

클로저를 사용한 상태 변경 추적 예시

아래의 예시는 클로저를 사용하여 카운트 상태를 추적하는 간단한 코드입니다.

function createCounter() {
  let count = 0;

  function changeBy(val) {
    count += val;
  }

  return {
    increase: function() {
      changeBy(1);
    },
    decrease: function() {
      changeBy(-1);
    },
    value: function() {
      return count;
    }
  };
}

let counter = createCounter();

console.log(counter.value()); // 0
counter.increase();
console.log(counter.value()); // 1
counter.decrease();
console.log(counter.value()); // 0

위 예시에서 createCounter 함수는 클로저를 반환합니다. 반환된 클로저에는 count 상태를 변경하는 메서드들이 포함되어 있으며, 이를 통해 count 상태를 추적할 수 있습니다.

클로저의 활용

클로저를 사용하면 상태를 안전하게 유지하고 변경할 수 있습니다. 이를 통해 상태 변경이 예측 가능하고 추적 가능한 코드를 작성할 수 있습니다. 또한 클로저를 통해 비공개 상태를 유지할 수 있어, 정보 은닉 및 캡슐화에도 활용할 수 있습니다.

클로저를 사용한 상태 변경 추적은 자바스크립트에서 코드의 예측 가능성과 유지보수성을 향상시키는 데 도움이 됩니다.

참고문헌:

MDN Web Docs, “Closures” 링크
Eloquent JavaScript, “Closure” 링크