✏️6.5 함수 선언 바꾸기 (Change Function Declaration)

➡️ 함수 이름 바꾸기, 시그니처 바꾸기, 메서드명 변경 ...

function circum(radius) {...}

리팩터링 후

function circumference(radius) {...}

🧷 배경

연결부에서 가장 중요한 요소는 함수의 이름이다. 이름이 좋으면 함수의 구현 코드를 살펴볼 필요 없이 호출문만 보고도 무슨 일을 하는지 파악할 수 있다. 저자는 잘못된 이름의 함수를 발견하면 더 나은 이름이 떠오르는 즉시 바꾸라는 명령으로 받아들인다. 그래야 나중에 그 코드를 다시 볼 때 무슨 일을 하는지 또 고민하지 않아도 된다.

매개변수도 마찬가지이다. 활용 범위가 넓어지고 다른 모듈과의 결합을 제거할 수 있다.

📍 좋은 이름 떠올리기

주석으로 함수의 목적을 설명해보자. 주석이 멋진 이름으로 바뀌어 되돌아올 때가 있다.

🧷 절차

🧷 간단한 절차

1. 매개변수를 제거하려거든 먼저 함수 본문에서 제거 대상 매개변수를 참조하는 곳은 없는지 확인한다.

2. 메서드 선언을 원하는 형태로 바꾼다.

3. 기존 메서드 선언을 참조하는 부분을 모두 찾아서 바뀐 형태로 수정한다.

4. 테스트한다.

🧷 마이그레이션 절차

1. 이어지는 추출 단계를 수월하게 만들어야 한다면 함수의 본문을 적절히 리팩터링한다.

2. 함수 본문을 새로운 함수로 추출한다.

3. 추출한 함수에 매개변수를 추가해야 한다면 간단한 절차를 따라 추가한다.

4. 테스트한다.

5. 기존 함수를 인라인 한다.

6. 이름을 임시로 붙여뒀다면 함수 선언 바꾸기를 한 번 더 적용해서 원래 이름으로 되돌린다.

7. 테스트한다.

🧷 리팩터링 예시

function circum(radius) {
  return 2 * Math.PI * radius;
}

• 함수의 이름을 이해하기 더 쉽게 바꾸기 위해 함수 선언부터 수정한다.

function circumference(radius) {
  return 2 * Math.PI * radius;
}

• circum()을 호출한 곳을 찾아 모두 circumference()으로 바꾼다.

🧷 예시: 매개변수 추가하기

도서 관리 프로그램의 Book 클래스에 예약 기능

// Book 클래스
addReservation(customer) {
  this._reservations.push(customer);
}

• 예약 시 우선순위 큐를 지원하라는 새로운 요구가 추가되었다.

• addReservation()의 본문을 새로운 함수로 추출한다.

// Book 클래스
addReservation(customer) {
  this.zz_addReservation(customer);
}

zz_addReservation(customer) {
  this._reservation.push(customer);
}

• 새 함수의 선언문과 호출문에 원하는 매개변수를 추가한다.

// Book 클래스
addReservation(customer) {
  this.zz_addReservation(customer, false);
}

zz_addReservation(customer, isPriority) {
  assert(isPriority === true || isPriority === false);  // 어서션을 추가하여 매개변수를 실제로 사용하는지 확인 
  this._reservation.push(customer);
}

🧷 예시: 매개변수 속성으로 바꾸기

고객이 뉴잉글랜드에 살고 있는지 확인하는 함수

function inNewEngland(aCustomer) {
  return ["", "", ...].includes(aCustomer.address.state);
}

// 호출문
const newEnglanders = someCustomers.filter(c => inNewEngland(c));

1. 매개변수로 사용할 코드를 변수로 추출해둔다.

function inNewEngland(aCustomer) {
  const stateCode = aCustomer.address.state;
  return ["", "", ...].includes(stateCode);
}

1. 함수 추출하기로 새 함수를 만든다.

function inNewEngland(aCustomer) {
  const stateCode = aCustomer.address.state;
  return xxNEWinNewEngland(stateCode);
}
function xxNEWinNewEngland(stateCode) {
  return ["", "", ...].includes(aCustomer.address.state);
}

1. 기존 함수 안에 변수로 추출해둔 입력 매개변수를 인라인 한다.

function inNewEngland(aCustomer) {
  return xxNEWinNewEngland(aCustomer.address.state);
}

1. 함수 인라인하기로 기존 함수의 본문을 호출문들에 집어넣는다. 실질적으로 기존 함수 호출문을 새 함수 호출문으로 교체하는 셈이다.

// 호출문
const newEnglanders = someCustomers.filter(c => xxNEWinNewEngland(c.address.state));

1. 함수 선언 바꾸기를 한 번 더 적용하여 새 함수의 이름을 기존 함수의 이름으로 바꾼다.

// 호출문
const newEnglanders = someCustomers.filter(c => inNewEngland(c.address.state));

// 최상위
function inNewEngland(stateCode) {
  return ["", "", ...].includes(stateCode);
}