[javascript] 클로저를 활용한 메서드 옵션화

08 Dec 2023

javascript

클로저를 사용하여 자바스크립트에서 메서드의 옵션화를 구현할 수 있습니다. 이를 통해 메서드에 다양한 옵션을 쉽게 적용하고 유연한 코드를 작성할 수 있습니다.

클로저란?

클로저는 함수와 그 함수가 선언된 렉시컬 환경(lexical environment)의 조합입니다. 클로저를 통해 함수 내부의 변수를 외부에서도 참조하거나 변경할 수 있습니다. 이는 함수가 종료된 후에도 변수가 메모리 상에서 유지되도록 가능하게 합니다.

메서드 옵션화

옵션화된 메서드는 다양한 옵션을 받아서 해당 옵션에 따라 동작을 변경할 수 있는 메서드를 말합니다. 예를 들어, DOM 요소를 조작하는 메서드에서 애니메이션 옵션, 콜백 옵션 등을 받아서 해당 옵션에 따라 다른 동작을 수행할 수 있습니다.

function animate(elem, options) {
  let defaultOptions = {
    duration: 400,
    easing: 'linear',
    complete: function() {}
  };
  options = Object.assign({}, defaultOptions, options);

  // 애니메이션 수행
}

위의 예시에서 animate 함수는 elem 요소를 애니메이션화하고, options를 인자로 받아서 여러 옵션을 처리합니다. 디폴트 옵션과 사용자가 전달한 옵션을 합쳐서 최종 옵션을 구성합니다.

클로저를 사용한 메서드 옵션화

function createAnimator() {
  let defaultOptions = {
    duration: 400,
    easing: 'linear',
    complete: function() {}
  };

  return function(elem, options) {
    options = Object.assign({}, defaultOptions, options);

    // 애니메이션 수행
  };
}

let animate = createAnimator();

위의 코드에서 createAnimator 함수는 클로저를 활용하여 내부의 defaultOptions 변수를 유지합니다. 이후 반환된 함수 animate는 클로저로 인해 defaultOptions에 접근하여 옵션을 처리할 수 있습니다.

이렇게 클로저를 사용하면 메서드를 생성하는 시점에서 옵션을 설정하고, 반환된 메서드를 호출할 때 해당 옵션을 쉽게 전달할 수 있습니다.

클로저를 활용한 메서드 옵션화는 자바스크립트에서 강력한 유연성을 제공합니다. 이를 통해 코드를 더 읽기 쉽고 유지보수하기 좋게 만들 수 있습니다.

결론

클로저를 활용하여 메서드를 옵션화할 수 있습니다. 이를 통해 유연하고 읽기 쉬운 코드를 작성할 수 있으며, 다양한 상황에 대응하는 강력한 함수를 만들 수 있습니다. 클로저를 활용하여 자바스크립트에서 메서드를 옵션화하는 방법에 대해 살펴보았습니다.

참고문헌:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures