[Refactoring 2판] Chapter 6-5 함수 선언 바꾸기 (Change Function Declaration)

리팩터링 2판을 보고 정리한 글로, 생략된 부분이 있거나 잘못 이해한 부분이 있을 수 있습니다.

개념과 원칙

함수 선언 바꾸기는 크게 두 가지 원칙을 가진다. 1) 함수명을 함수의 역할을 잘 드러내도록 명확히 하는것, 2) 매개변수를 정리하는 것 이다.

배경: 왜 함수 선언 바꾸기가 필요한가?

함수 선언문을 명확히 다듬는 것이 왜 필요할까? 어떤 함수의 선언이 명확하다고 할 수 있을까?

내가 이해한 바로는

기존 코드를 읽다가 어떤 함수의 이름만 봐서 해당 함수가 어떤 역할을 하는지 도통 모르겠다던가, 함수 매개변수로 넘겨지는 인자값이 필요 이상으로 큰 문맥s(context)을 가져 사이드 이펙트를 야기할 가능성이 있다던지 등의 bad smell 을 풍기면, 함수 선언 바꾸기 로 리팩토링을 진행하자. 🛠

매개변수 수정하는 예시) 전화번호 formatting 하는 함수

리팩토링 전

const formatPhoneNumber = (user) => {
  let cleaned = ('' + user.str).replace(/\D/g, '');
  let match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);

  if (match) {
    return '(' + match[1] + ') ' + match[2] + '-' + match[3]
  };

  return null
};

위 코드를 보면, user 객체를 매개변수로 넘겨줌으로써 formatPhoneNumber 함수의 문맥은 user 와 결합 (coupling) 되어 버렸다. 만약 user 의 전화번호가 아니라 회사 전화번호를 포맷팅 하고 싶은 경우에는 그를 위한 함수를 따로 만들어야 한다. 이런 경우가 매개변수 수정이 필요한 상황이다.

리팩토링 후

const formatPhoneNumber = (str) => {
  let cleaned = ('' + str).replace(/\D/g, '');
  let match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);

  if (match) {
    return '(' + match[1] + ') ' + match[2] + '-' + match[3]
  };

  return null
};

formatPhoneNumber 함수 매개변수를 user 객체 에서 phone number (type: string) 로 넘겨줌으로써, 함수의 문맥을 user 와 독립시켰다. 이제 formatPhoneNumber 함수는 회사든 사람이든 상관없이 모든 전화번호를 format 하는데 쓰일 수 있게 되었다.

함수명 명확히 바꾸는 예시) 함수명을 너무 축약한 경우

리팩토링 전

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

여기서 circum 은 원의 둘레를 뜻하는 circumference 의 줄임말이다. 불필요하게 축약하여 의미가 명확하지 않으므로 다음과 같이 함수명을 리팩토링한다.

리팩토링 후

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

마이그레이션 절차 (하나 하나씩 단계별로) 예시) 고객이 뉴잉글랜드에 살고 있는 지 확인하는 함수

리팩토링을 진행할 때, 함수가 쓰이는 곳이 몇 군데가 안되어서 한 번에 모두 찾아 바꾸는 경우가 있는 반면에 쓰이는 곳이 많아 한번에 바꿀 수 없는 경우가 있다. 후자의 경우 마이그레이션 절차를 따라야 한다. 마이그레이션 절차는 코드 예시를 보는 것이 이해가 빠르다.

리팩토링 전

  // 선언문
  function inNewEngland(aCustomer) {
    return ["MA", "CT", "ME", "VT", "NH", "RI"].includes(aCustomer.address.state);
  }
  ...

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

매개변수로 넘겨주는 aCustomer 에서 나는 bad smell 을 느낄 수 있다. 🐷 Customer 객체에는 address.state 말고도 다른 속성들이 있을텐데, 다른 속성들은 사실 customer 가 뉴잉글랜드에 사는 지 확인하는 함수의 일과는 상관이 없으니까 매개변수에 aCustomer 가 아니라 고객이 거주하는 주 이름만 넘겨주는 방향으로 리팩토링하는 것이 좋다. 아래는 해당 리팩토링을 마이그레이션 절차로 하는 코드이다.

  // 바로 매개변수를 aCustomer 에서 aCustomer.address.state 로 바꾸면 개발자가 놓친 부분에서 버그가 날 가능성이 있으므로 우선 매개변수로 사용할 코드를 변수로 추출한다. 

  function inNewEngland(aCustomer) {
    const stateCode = aCustomer.address.state;
    return ["MA", "CT", "ME", "VT", "NH", "RI"].includes(aCustomer.address.state);
  }

  // 함수 추출하기로 새 함수를 만든다.
  function inNewEngland(aCustomer) {
    const stateCode = aCustomer.address.state;
    return xxNewinNewEngland(stateCode);
  }

  function xxNewinNewEngland(stateCode) {
    return ["MA", "CT", "ME", "VT", "NH", "RI"].includes(stateCode);
  }

  function inNewEngland(stateCode) {
    return ["MA", "CT", "ME", "VT", "NH", "RI"].includes(stateCode);
  }

  const newEnglanders = someCustomers.filter(c => inNewEngland(c.address.state));