함수 추출하기

예시:유효범위를 벗어나는 변수가 없을 때

• 이 경우는 아주 간단한 경우로 아래 순서대로 하면 된다.
  1. 추출할 코드를 잘라내서 새 함수에 붙인다.
  2. 원래 자리에 새 함수 호출문을 넣는다.

//before

function printOwing(invoice) {
  let outstanding = 0;

  // 배너 출력
  console.log('***********');
  console.log('**고객 채무**');
  console.log('***********');

  // ...생략
}

//after

function printOwing(invoice) {
  let outstanding = 0;

  // 배너 출력
  printBanner();
  
  // ...생략
}

function printBanner() {
  console.log('***********');
  console.log('**고객 채무**');
  console.log('***********');
}

예시: 지역 변수를 사용할 때

• 지역 변수를 사용하지만 다른 값을 다시 대입하지는 않는 경우다.
• 지역 변수를 매개변수로 받는 함수로 추출하면 된다.

// before

function printOwing(invoice) {
  
  //..생략

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

// after

function printOwing(invoice) {
  let outstanding = 0;
  
  //..생략

  // 세부사항 출력
  printDetails(invoice, outstanding);
}

function printDetails(invoice, outstanding) {
  console.log(`고객명: ${invoice.customer}`);
  console.log(`채무액: ${outstanding}`);
  console.log(`마감일: ${invoice.dueDate.toLocaleDateString()}`);
}

• 만약 지역변수가 배열, 객체와 같은 데이터 구조라면 매개변수로 넘긴 후 필드 값을 수정할 수 있다.

// before

function printOwing(invoice) {
  //...생략

  // 마감일 기록
  const today = Clock.today; // https://martinfowler.com/bliki/ClockWrapper.html
  invoice.dueDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 30
  );
  
  //...생략
}

// after

function printOwing(invoice) {
  //...생략

  // 마감일 기록
  recordDueDate(invoice);
  
  //...생략
}

function recordDueDate(invoice) {
  const today = Clock.today;
  invoice.dueDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 30
  );
}

예시: 지역 변수의 값을 변경할 때

• 만약 매개변수에 값을 대입하는 코드를 발견하면 그 변수를 쪼개서 임시 변수를 새로 하나 만들어 그 변수에 대입하게 한다.(왜 이렇게 해야 하지?)
• 대입 대상이 되는 임시 변수는 크게 두 가지로 나눌 수 있다.
  1. 변수가 추출된 코드 안에서만 사용될 때
     • 문장 슬라이드를 통해 변수 조작을 모두 한 곳에 처리하도록 모은다.
  2. 변수가 추출한 함수 밖에서 사용될 때
     1) 변수 선언문을 변수가 사용되는 코드 근처로 슬라이드한다.
     2) 추출할 부분을 새로운 함수로 복사한다.
     3) 이 때 선언문을 추출할 코드 앞으로 옮겼기 때문에 매개변수로 전달하지 않아도 된다.
     4) 추출한 코드에서 변경된 변수의 값을 반환한다.
     5) 추출한 코드의 원래 자리에 새로 만든 함수를 호출하는 문장으로 교체한다. 이때 추출한 함수에서 새 값을 반환하므로 이 값을 원래 변수에 저장한다.
     6) 추출한 코드 내부의 반환 값의 이름을 내 코딩 스타일에 맞게 바꾼다.

// before

function printOwing(invoice) {
  let outstanding = 0;

  //...생략

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

  //...생략
}

// after

function printOwing(invoice) {
  //...생략
  
  // 미해결 채무(outstanding) 계산
  const outstanding = calculateOutstanding(invoice);

  //...생략
}

function calculateOutstanding(invoice) {
  let result = 0;

  for (const o of invoice.orders) {
    outstanding += o.amount;
  }
  return result;
}

---