실행 결과를 재사용하는 함수 skip

사용 예시

<ul id="list">
  <li>Item 1<button>삭제</button></li>
  <li>Item 2<button>삭제</button></li>
  <li>Item 3<button>삭제</button></li>
</ul>

const askOnRemove = skip(() =>
  confirm(
    '정말 삭제하시겠습니까? 최초 1회만 확인합니다.',
  ),
);

const list = document.getElementById('list');
list.addEventListener('click', (e) => {
  const {
    nodeName,
    parentNode: targetItem,
  } = e.target;
  const { parentNode } = targetItem;
  nodeName === 'BUTTON' &&
    askOnRemove() &&
    parentNode.removeChild(targetItem);
});

함수 본문

function skip(callback) {
  let result; // 클로저 영역
  return function (...args) {
    return result || (result = callback(...args));
  };
}

함수 본문 해설

함수 skip은 callback를 받아 실행하고, 만약 그 함수의 반환값이 truthy이면 해당 값을 반환하고, 이후에는 함수를 실행하지 않는다.

함수형 프로그래밍과의 연관성

1. 함수형 자바스크립트는 함수를 N 단계로 조합해서 사용한다. 즉, 고차 함수 응용의 반복이다.
2. skip은 고차 함수이고, callback은 skip이 남겨 놓은 로직을 완성하는 함수다.
3. 예시로 사용된 askOnRemove는 클로저인데, 함수로 만들어진 함수는 대부분 클로저다.

고차 함수란?

함수를 인수로 사용하거나 함수를 반환하는 함수이다.

예시:

1. const filter = (predicate, xs) => xs.filter(predicate) // 함수가 인자
2. const is = (type) => (x) => Object(x) instanceof type // 함수를 반환
3. filter(is(Number), [0, '1', 2, null]) // [0, 2]