리팩터링: 함수 추출하기 및 인라인하기

함수 추출하기(Exacting Function)

반대: 함수 인라인 하기(Inline Function)

함수로 독립시키는 기준

1. 재사용성 기준으로 두 번 이상 사용될 코드는 함수로
2. 목적과 구현을 분리하는 경우. 함수의 역할을 쉽게 알아볼 수 있어야 한다.

절차

1. 함수를 새로 만들고 무슨 목적인지 드러내는 이름을 붙인다.
2. 추출할 코드를 원본함수에서 복사해서 새 함수안에 넣는다.
3. 추출한 코드 중에서 지역 변수를 참조하거나 추출한 함수의 유효범위를 벗어나는 변수는 없는지 검사한다. 있다면 매개변수로 전달한다.
4. 추출한 코드 부분에서는 함수를 호출하도록 수정한다.

예시) 유효범위를 벗어나는 변수가 없을 경우

function printOwing(invoice) {
  let outstanding = 0;

  console.log("--고객채무--");

  // 미해결 채무(outstanding)를 계산한다.
  for (const o of invoice.order) {
    outstanding += o.amount;
  }

  // 마감일(duedate)를 기록한다.
  const today = Clock.today;
  invoice.dueDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 30
  );

  // 세부 사항 출력
  console.log(`고객명: ${invoice.customer}`);
  console.log(`채무액: ${outstanding}`);
  console.log(`마감일: ${invoice.dueDate.toLocaleDateString()}`);
}

function printOwing(invoice) {
  let outstanding = 0;

  printBanner(); // 배너 출력 로직을 분리

  // 미해결 채무(outstanding)를 계산한다.
  for (const o of invoice.order) {
    outstanding += o.amount;
  }

  // 마감일(duedate)를 기록한다.
  const today = Clock.today;
  invoice.dueDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 30
  );

  // 세부 사항 출력
  console.log(`고객명: ${invoice.customer}`);
  console.log(`채무액: ${outstanding}`);
  console.log(`마감일: ${invoice.dueDate.toLocaleDateString()}`);
}
function printBanner() {
  console.log("--고객채무--");
}

// 2차 함수추출 : 세부사항 출력코드도 분리

function printOwing(invoice) {
  let outstanding = 0;

  printBanner(); // 배너 출력 로직을 분리

  // 미해결 채무(outstanding)를 계산한다.
  for (const o of invoice.order) {
    outstanding += o.amount;
  }

  // 마감일(duedate)를 기록한다.
  const today = Clock.today;
  invoice.dueDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 30
  );

  printDetails();

  // 세부 사항 출력
}
function printDetails() {
  console.log(`고객명: ${invoice.customer}`);
  console.log(`채무액: ${outstanding}`);
  console.log(`마감일: ${invoice.dueDate.toLocaleDateString()}`);
}

함수 인라인하기(Inline Function)

반대: 함수 추출하기

• 때로는 함수 이름보다 본문이 명확한 경우가 있다. 쓸데 없는 함수 호출을 하지 않을 수 있다.

절차

1. 다형 메소드(polymorphic method) 인지 확인
2. 인라인 함수를 호출하는 곳을 모두 찾는다.
3. 각 호출문을 함수 본문으로 교체한다.
4. 교체마다 테스트한다.
5. 함수를 제거한다.

예시

function rating(aDiver) {
  return moreThanFiveLateDeliveries(aDriver) ? 2 : 1;
}

function moreThanFiveLateDeliveries(aDriver) {
  return aDriver.numberOfLateDeliveries > 5;
}

// 수정
function rating(aDriver) {
  return aDriver.numberOfLateDeliveries > 5 ? 2 : 1;
}

변수 추출하기 (Extract Variable)

표현식이 복잡할때 지역변수를 사용하면 표현식을 쉽게 관리할 수 있고 코드의 목적을 드러낸다.

• 함수 안에서만 의미가 있는 표현식은 변수로 추출하는 것이 좋다.
• 만약 넓은 문맥에서 까지 의미가 있다면 그 범위에서 통용되는 이름을 생각해야 한다.

절차

1. 표현식을 추출하기 전에 부작용이 없는지 확인한다.
2. const 변수를 선언하고 이름을 붙일 표현식을 복사해서 넣는다.
3. 원본 표현식을 새로 만든 변수로 교체한다.
4. 테스트 한다.
5. 표현식을 새로 만든 변수로 교체한다.

예시

function price(order) {
  // 가격 = 기본가격 - 수량할인 + 배송비

  return (
    order.quantity * order.itemPrice -
    Math.max(0, order.quantity - 500) * order.itemPrice * 0.05 +
    Math.min(order.quantity * order.itemPrice * 0.1, 100)
  );
}

// 수정후
function price(order) {
  const basePrice = order.quantity * order.itemPrice;
  const quantityDiscount =
    Math.max(0, order.quantity - 500) * order.itemPrice * 0.05;
  const shipping = Math.min(basePrice * 0.1, 100);

  return basPrice - quantity.Discount + shipping;
}