리팩터링 1장 - 1

리팩터링: 첫 번째 예시

1.1 자, 시작해보자!

1.2 예시 프로그램을 본 소감

프로그램이 새로운 기능을 추가하기에 편한 구조가 아니라면, 먼저 기능을 추가하기 쉬운 형태로 리팩터링하고 나서 원하는 기능을 추가한다.

1.3 리팩터링의 첫 단계

• 리팩터링할 코드 영역을 꼼꼼하게 검사해줄 테스트 코드 마련하기
• 리팩터링하기 전에 제대로 된 테스트부터 마련한다. 테스트는 반드시 자가진단하도록 만든다.

1.4 statement() 함수 쪼개기

• 테스트

  • 간단한 수정도 리팩터링 후에는 항상 테스트하는 습관을 들이자
  • 조금씩 변경하고 매번 테스트하는 것은 리팩터링 절차의 핵심이다.

• 함수 추출하기

  • 💡 자바스크립트에서는 중첩 함수를 사용하면 바깥 함수의 변수를 새로 추출한 함수에 매개변수로 전달할 필요가 없다.
  • 추출된 함수 코드에서 보다 명확하게 표현할 수 있는 것들을 찾는다. (ex. 변수 이름)
  • 추출된 함수의 반환 값은 result 등의 네이밍으로 통일해줄 수 있다.

• 임시 변수 제거하기

  Copy

  // 😵 bad
  const play = plays[perf.playID];
  
  // 😗 soso
  function playFor(aPerformance) {
    return plays[aPerformance.playID];
  }
  
  const play = playFor(perf);
  
  // 😄 good (변수 인라인하기)
  let thisAmount = amountFor(perf, playFor(perf));

  • 지역 변수를 제거하면 유효범위를 신경 썽 할 대상이 줄어들어 추출 작업이 쉬워진다

• 적립 포인트 계산 코드 추출하기

• format 변수 제거하기

  • 함수 선언 바꾸기 - 함수의 핵심 기능을 살려주는 네이밍으로 바꿔준다

• volumeCredits 변수 제거하기

  • 반복문 쪼개기
    • 로직에 따라 별도의 for문으로 분리한다
    • 반복문을 쪼개서 발생하는 중복은 성능에 미치는 영향이 미미하다
    • 💡 리팩터링으로 인한 성능 문제는 “특별한 경우가 아니라면 일단 무시하자”
  • 문장 슬라이드하기
    • volumeCredits 값 갱신과 관련한 문장들을 한데 모은다
    • 임시 변수를 질의 함수로 바꾸기가 수월해진다

1.5 중간 점검: 난무하는 중첩 함수