[함수형 프로그래밍] 클린코드

함수의 재활용성을 높이고 합성을 쉽게 하기 위해서는 가능한 한가지 의미 있는 작업을 하는 최소한의 의미를 가지는 순수 함수들을 만들고,이 함수들을 마치 레고블록처럼 조합(합성)해서 더 큰 프로그래밍을 만들어나가야 합니다.

고차 함수를 이용한 추상화

지난 클립과 마찬가지로 부수효과가 포함된 for루프의 명령형 방식을 map, filter, reduce와 같은 고차함수로 사용해 선언적 방식으로 코드로 리팩토링 해도록 하겠습니다.

변경전

function orderCoffee(el: any, orderList: any): void {
  if (el) {
    if (Array.isArray(orderList)) {
      el.addEventListener("click", function () {
        setTimeout(function () {
          for (let i = 0; i < orderList.length; i++) {
            document.querySelector(
              "#log"
            ).innerHTML += `${orderList[i]}가 완료되었습니다<br />`;
          }
        }, 2000);
      });
    }
  }
}

orderCoffee(document.querySelector("button"), ["americano", "cafeLatte"]);

변경 후

//3. setTimeout
const delay = (time: number) =>
  new Promise<void>((resolve) => setTimeout(() => resolve(), time));
const logEl = document.querySelector("#log") as HTMLElement;
const insertMsg = (order: string) =>
  (logEl.innerHTML += `${order}가 완료되었습니다<br />`);

//2. 이벤트 핸들러의 콜백함수 외부로 따로
async function buttonClickHandler(orderList: string[]) {
  const delayTime = 2000;
  await delay(delayTime);
  orderList.forEach(insertMsg);
}

function orderCoffee(el: any, orderList: any): void {
  //1. if문이 중첩으로 되어 있으니 &&로 합치고 !연산자를 이용해 if내 코드와 분리
  if (!el && !Array.isArray(buttonClickHandler(orderList))) return;
  el.addEventListener("click");
}

orderCoffee(document.querySelector("button"), ["americano", "cafeLatte"]);

---

참고
유트브: 프롱트의 코드리뷰에서 칭찬받는 코드의 비밀
Typescript를 활용한 함수형 프로그래밍 온보딩