[Refactoring] 6장 : 기본적인 리팩터링

1. 함수 추출하기

function print() {
    printBanner();
    let someVar = calculate();

    // print detail
    console.log("something 1");
    console.log("something 2");
}

// after
function print() {
    printBanner();
    let someVar = calculate();
    printDetail();

    function printDetail() {
        console.log("something 1");
        console.log("something 2");
    }
}

• 말 그대로 함수 추출하기

2. 함수 인라인하기

function func() {
    return someFunc1();
}

function someFunc1() {
    return someFunc2() - 3;
}

// after
function func() {
    return someFunc2() - 3;
}

• 내부 코드가 목적이 분명한 경우 굳이 함수를 또 호출할 필요 없이 인라인한다.

3. 변수 추출하기

return a * b - 
            c / d + 
            e * f;

// after
const mul = a * b;
const div = c / d;
const mul2 = e * f;

return mul - div + mul2;

• 표현식이 너무 복잡한 경우 지역 변수로 쪼갠다.

4. 변수 인라인하기

let result = order.price;
return (result > 10000);

// after
return order.price > 10000;

• 추출한 지역 변수명이 그냥 호출문과 별 상관 없을 때 인라인한다.

5. 함수 선언 바꾸기

function c(r) {}

// after
function circumference(radius) {}

// 함수명 변경
function c(r) {
    return circumference(r);
}

function circumference(radius) {

}

// 매개변수 변경
function func(arg1) {
    zzzFunc(arg1, false);
}

function zzzFunc(arg1, arg2) {

}

• 함수 이름은 프로토타입만 보고도 무슨 역할을 하는지 알아야 함
• 복잡한 경우 다음의 마이그레이션 절차를 따른다.
  1. 함수 본문을 새 함수로 추출
  2. 추출한 함수에 매개변수를 추가해야 한다면 추가
  3. 테스트
  4. 기존 함수 인라인
  5. 테스트

6. 변수 캡슐화하기

let someData = {firstName: "choi", lastName: "jaewon"};

// after
let someData = {firstName: "choi", lastName: "jaewon"};
export function getSomeData() {return someData;}
export function setSomeDate(firstName) {someData.firstName = firstName;}

• 전역 데이터와 같이 범위가 넓은 데이터는 좋지 않다.
• 이러한 데이터를 someData.firstName 처럼 모든 함수에서 직접 접근하게 하는 것은 매우 좋지 않음
  • 변수를 캡슐화함 → 데이터를 독점적으로 접근하는 함수를 만들고, 해당 함수를 통해서만 데이터에 접근할 수 있도록 만듦

7. 변수 이름 바꾸기

let a = h * w;

// after
let area = height * width;

• 변수명 또한 변수를 보고도 무슨 역할을 하는지 알 정도로 잘 지어야 한다.

8. 매개변수 객체 만들기

function someFunc(start, end) {}

// after
function someFunc(range) {}

• 매개변수의 수가 많거나 하나의 의미로 추출 가능할 때 사용

9. 여러 함수를 클래스로 묶기

function some1(data) {}
function some2(data) {}
function some3(data) {}

// after
class MyClass {
    some1() {}
    some2() {}
    some3() {}
}

• 같은 데이터를 매개변수로 받는 많은 메소드들이 있을 때, 이를 하나의 클래스로 묶으면 더 용이하다.

10. 여러 함수를 변환 함수로 묶기

function some1(data) {}
function some2(data) {}
function some3(data) {}

// after
function middle(data) {
    some1(data);
    some2(data);
    some3(data);
}

• 9번과 흡사한 형태
• 차이
  • 원본 데이터가 코드 안에서 갱신되는 경우에는 클래스로 묶는 편이 낫다.

11. 단계 쪼개기

const orderData = orderString.split(/\s+/);
const productPrice = priceList[orderData[0].split("-")[1]];
const orderPrice = parseInt(orderData[1]) * productPrice;

// after
const orderRecord = parseOrder(order);
const orderPrice = price(orderRecord, priceList);

function parseOrder(order) {
    const value = orderString.split(/\s+/);

    return ({
        productID: values[0].split("-")[1],
        quantity: parseInt(values[1])
    });
}

function price(order, priceList) {
    return order.quantity * priceList[order.productID];
}

• 위의 경우 값을 파싱하는 것 + 값을 계산하는 것 두 단계로 나눌 수 있다.
• 이를 단계별로 쪼갬으로써 하나에 집중할 수 있다.
  • 이 때 주의할 점은 각 단계가 확연히 다른 일을 수행해야 한다는 것

 

 

https://product.kyobobook.co.kr/detail/S000001810241