★ 규칙을 찾아내고 기능별 최소 단위로 쪼개어 분리하여 관리하는 습관이 필요하다.
맵핑관계 정의
Dirty Sample#1
function excutePayment(){
if(payment === "KAKAO_PAYMENT"){
return "카카오 결제 처리";
}else if(payment === "NAVER_PAYMENT"){
return "네이버 결제 처리";
}else if(payment === "COUPANG_PAYMENT"){
return "쿠팡 결제 처리";
}else if(payment === "PAYCO_PAYMENT"){
return "페이코 결제 처리";
}else if(payment === "APPLE_PAYMENT"){
return "애플 결제 처리";
}
}
↑↑ 위 코드는 if문으로 분기처리가 많이 되어있어 가독성이 많이 떨어진다. 유지보수에 불편함이 있다.
Clean Sample#1 - 맵핑 대상을 객체로 만들고, 비즈니스 로직을 분리한다.
const paymentMap = { // 고정된 값, 데이터
"KAKAO_PAYMENT" : "카카오 결제 처리",
"NAVER_PAYMENT" : "쿠팡 결제 처리",
"PAYCO_PAYMENT" : "페이코 결제 처리",
"APPLE_PAYMENT" : "애플 결제 처리"
}
function excutePayment(paymentType){ // 비즈니스 로직
return paymentMap[paymentType];
}
excutePayment("KAKAO_PAYMENT");
↑↑ 규칙을 가지는 데이터를 객체화하여 분리한다. 로직과 데이터가 분리되면서 유지보수에 용이한 것을 볼 수 있다.
Dirty Sample#2
function funcA(){}
function funcB(){}
function funcC(){}
function funcD(){}
function excutePayment(paymentType){
if(paymentType === "KAKAO_PAYMENT"){
funcA();
}else if(paymentType === "NAVER_PAYMENT"){
funcB();
funcC();
}else if(paymentType === "GOUPANG_PAYMENT"){
funcA();
funcD();
}else if(paymentType === "PAYCO_PAYMENT"){
funcA();
funcB();
}
}
excutePayment("KAKAO_PAYMENT");
Clean Sample#2
const paymentMap = {
KAKAO_PAYMENT(){ // ver.1 함수(function, 화살표)를 생략할 수있다.
funcA();
funcA();
},
NAVER_PAYMENT: () => funcB(), // ver.2
GOUPANG_PAYMENT: () => funcC() // ver.2
PAYCO_PAYMENT: funcD // ver.3
}
function funcA(){ console.log("funcA called~!") }
function funcB(){ console.log("funcB called~!") }
function funcC(){ console.log("funcC called~!") }
function funcD(){ console.log("funcD called~!") }
function excutePayment(paymentType){ // 비즈니스 로직
paymentMap[paymentType]();
}
excutePayment("GOUPANG_PAYMENT");
↑↑ 이번에는 함수에 대한 객체화이다. 위와 같이 함수들을 모아 객체화하고, ver.1과 같이 다수의 함수를 넣을 수 있는 공간도 만들 수 있는 것을 볼 수 있다.
'클린코드 샘플(JavaScript)' 카테고리의 다른 글
[2] 클린코드 Rule (0) | 2022.11.17 |
---|---|
[1] 클린코드 Rule (0) | 2022.11.17 |
Redux - reducer(switch문) 리팩토링 (0) | 2022.11.15 |
if else, switch (feat. 객체 + 함수) (0) | 2022.11.15 |
함수형 프로그래밍, 상속 (커링, Currying) (0) | 2022.11.01 |
댓글