클로저는 자바스크립트에서 매우 강력한 기능 중 하나입니다. 클로저를 활용하면 함수를 반환하고 반환된 함수가 원래 함수의 범위 안에 있는 변수에 접근할 수 있습니다. 이러한 특성을 이용하여 before와 after 함수를 구현할 수 있습니다. 이번 블로그에서는 클로저를 이용하여 before 함수와 after 함수를 구현하는 방법에 대해 알아보겠습니다.

before 함수 구현

before 함수는 주어진 함수가 호출되기 전에 실행되는 함수를 만들어낸다. 아래는 before 함수의 간단한 예제입니다.

function before(originalFn, beforeFn) {
  return function(...args) {
    beforeFn();
    return originalFn(...args);
  };
}

이제 before 함수를 사용하여 실제 함수를 래핑하는 방법을 살펴봅시다.

function sayHello() {
  console.log('Hello!');
}

const beforeSayHello = before(sayHello, () => {
  console.log('Before saying hello');
});

beforeSayHello();

위 예제에서는 sayHello 함수가 호출되기 전에 “Before saying hello”를 출력하는 beforeSayHello 함수를 생성하였습니다.

after 함수 구현

after 함수는 주어진 함수가 실행된 후에 실행되는 함수를 만들어냅니다. 아래는 after 함수의 구현 예제입니다.

function after(originalFn, afterFn) {
  return function(...args) {
    const result = originalFn(...args);
    afterFn();
    return result;
  };
}

이제 after 함수를 사용하여 실제 함수를 래핑하는 방법을 살펴봅시다.

function sayHello() {
  console.log('Hello!');
}

const afterSayHello = after(sayHello, () => {
  console.log('After saying hello');
});

afterSayHello();

위 예제에서는 sayHello 함수가 실행된 후에 “After saying hello”를 출력하는 afterSayHello 함수를 생성하였습니다.

클로저와 함께 before와 after 함수를 구현하여 함수의 실행 전후에 원하는 동작을 추가할 수 있습니다. 이를 통해 코드의 재사용성과 유연성을 향상시킬 수 있습니다.

참고: MDN web docs - 클로저