처음부터 좋은 스크립트를 짜면 좋지만 내가 짠 코드가 잘 보이지 않을 때에는 나중에 리팩토링을 하는 것도 좋은 방법이라고 생각을 한다.
간단하지만 소소한 팁을 올려주신 FE재남님의 if else 리팩토링 #1 (feat. 객체 + 함수) 를 보며 공부차원에서 정리해봤다.
if else문을 쓰는 것이 꼭 나쁘다는 것만은 아니다.
상황에따라 다르게 쓰이겠지만 조금 더 가독성이 좋은 코드, 짧은 코드로 리팩토링하는 몇 가지 방법들을 소개해 주셨다.
제일 첫번째 예문을 가지고 왔다. 다른 예문은 영상을 참고하길!
const naverLogin = (id) => {
return "네이버";
};
// ... 생략
const socialLogin = (where, id) => {
let domain;
// if else - 4번을 접근해야 함
if (where === "naver") {
domain = naverLogin(id);
} else if (where === "kakao") {
domain = kakaoLogin(id);
} else if (where === "facebook") {
domain = facebookrLogin(id);
} else if (where === "google") {
domain = googleLogin(id);
}
};
naverLogin, kakaoLogin, facebookrLogin, googleLogin함수가 있다고 가정한 뒤 예시 코드를 보면 if else문으로 4번씩 접근하고 있다.
const naverLogin = (id) => {
return "네이버";
};
// ... 생략
switch (where) {
case "naver":
domain = naverLogin(id);
break;
case "kakao":
domain = kakaoLogin(id);
break;
case "facebook":
domain = facebookLogin(id);
break;
case "google":
domain = googleLogin(id);
break;
}
함수 안에 있는 if else문을 swith문을 변경하면 이런 코드일 것이다.
가독성은 좋아졌지만 break;가 추가되어 코드가 늘어났다.
const executeLogin = (where, id) => {
switch (where) {
case "naver":
return naverLogin(id);
case "kakao":
return kakaoLogin(id);
case "facebook":
return facebookLogin(id);
case "google":
return googleLogin(id);
}
};
const socialLogin = (where, id) => {
const domain = executeLogin(where, id);
return `${domain} ${id}`;
};
함수로 분리하고 나니 switch문만 썼을 때 보다 훨씬 더 간결해졌다.
그럼 swith문을 사용하지 않고 객체로 변경해보면 어떨까?
const socialLoginMap = {
kakao: kakaoLogin,
naver: naverLogin,
facebook: facebookLogin,
google: googleLogin,
};
const socialLogin = (where, id) => {
const domain = socialLoginMap[where](id);
return `${domain} ${id}`;
};
if else 보다는 성능이 훨씬 좋다. 왜냐면 무조건 딱 한번만 접근할 수 있으니까!
너무너무 좋은 꿀팁을 한번 더 인지하고 넘어가는 것 같아서 좋았다.