11월 3주차 리팩토링(매개변수 객체 만들기, 변수 인라인하기, 함수 선언 바꾸기, 매개변수를 질의함수로 바꾸기)

[JeGwan]

Introduce parameter object

배경

• 데이터 항목 여러개가 이 함수에서 저함수에서 몰려다니면 데이터 구조를 하나로 모아주자.

예시

function amountInvoice(startDate: Date, endDate: Date) {
  // ...
}

function amountOverdue(startDate: Date, endDate: Date) {
  // ...
}

// into

function amountInvoice(dateRage: [Date, Date]) {
  // ...
}

function amountOverdue(dateRage: [Date, Date]) {
  // ...
}

장점

• 데이터 사이의 관계가 명확해진다.
• 매개변수 수가 줄어든다.
• 같은 데이터 구조를 사용하는 모든 함수가 똑같은 이름을 사용하기에 일관성이 높아진다.

절차

1. 적당한 데이터 구조가 마련되어있지 않으면 새로 만든다.
2. 테스트한다.
3. 함수선언 바꾸기로 새데이터 구조를 매개변수로 추가한다.
4. 테스트한다.
5. 함수 호출 시 새로운 데이터 구조 인스턴스를 넘기도록 수정한다. 수정할 때 마다 테스트한다.
6. 기본 매개변수를 사용하던 코드를 새 데이터 구조의 원소를 사용하도록 바꾼다.
7. 다 바꿨다면 기존 매개변수를 제거하고 테스트한다.

예시

const station = {
  name: 'ZB1',
  readings: [
    { temp: 47, time: '2020-11-10 09:10' },
    { temp: 54, time: '2020-11-11 09:10' },
    { temp: 32, time: '2020-11-12 09:10' },
    { temp: 39, time: '2020-11-13 09:10' },
    { temp: 22, time: '2020-11-14 09:10' },
  ],
}

function readingsOutsideRange(station, min, max) {
  return station.readings.filter(r => r.temp < min || r.temp > max)
}

const alerts = readingsOutsideRange(station, operatingPlan.temperatureFloor, operationgPlan.temperatureCeiling)

// 1. min, max를 묶어 표현하는 클래스를 만들어보자.

class NumberRange {
  constructor(min, max) {
    this._data = { min, max }
  }
  get min() {
    return this._data.min
  }
  get max() {
    return this._data.max
  }
}

// 2. NumberRange 타입의 데이터를 넣을 수 있게 함수에 매개변수를 추가한다.

function readingsOutsideRange(station, min, max, range) {
  return station.readings.filter(r => r.temp < min || r.temp > max)
}

// 3. 호출문엔 일단 null을 넣는다.

const alerts = readingsOutsideRange(station, operatingPlan.temperatureFloor, operationgPlan.temperatureCeiling, null)

// 4. 호출문을 바꾼다.

const range = new NumberRange(operatingPlan.temperatureFloor, operationgPlan.temperatureCeiling)
const alerts = readingsOutsideRange(station, operatingPlan.temperatureFloor, operationgPlan.temperatureCeiling, range)

// 5. 기존 매개변수 사용부분을 변경한다.
function readingsOutsideRange(station, range) {
  return station.readings.filter(r => r.temp < range.min || r.temp > range.max)
}

// 6. 호출부의 안쓰는 매개변수도 없앤다.
const range = new NumberRange(operatingPlan.temperatureFloor, operationgPlan.temperatureCeiling)
const alerts = readingsOutsideRange(station, range)

Inline variable

배경

• 변수는 함수 안에서 표현식을 가리키는 이름.
• 하지만 표현식과 다를 바 없다면 인라인을 고려하자
• (내 생각) 주로 논리, 비교 연산자들은 여러번 쓰이지 않는다면 따로 변수화 시키지 않고 인라인 처리가 나을 것 같다.

예시

function isBigBasePrice(order) {
  const basePrice = order.basePrice
  return basePrice > 1000
}

// into

function isBigBasePrice(order) {
  return order.basePrice > 1000
}

Change function declaration

배경

• 함수 선언은 프로그램을 작은 부분으로 나누는 주된 수단
• 어렵고 직관적이지 못한 이름을 지으면 동작파악이 어렵고 지속적인 추가/수정이 어려워짐

예시

function circum() {}

// into

function circumference() {}

Replace Parameter with Query

배경

• callee가 이미 주어진 매개변수로 결정할 수 있는 값을 따로 전달하는 것은 중복
• 파라미터의 개수를 줄이자.

예시

availableVacation(employee, empleyee.grade)
function availableVacation(employee, grade) {
  // ...
}

// into

availableVacation(employee)
function availableVacation(employee) {
  const grade = employee.grade
}