처음부터 좋은 스크립트를 짜면 좋지만 내가 짠 코드가 잘 보이지 않을 때에는 나중에 리팩토링을 하는 것도 좋은 방법이라고 생각을 한다.
간단하지만 소소한 팁을 올려주신 FE재남님의 if else 리팩토링 #1 (feat. 객체 + 함수) 를 보며 공부차원에서 정리해봤다.

👩🏻‍💻 if else 리팩토링

if else문을 쓰는 것이 꼭 나쁘다는 것만은 아니다.
상황에따라 다르게 쓰이겠지만 조금 더 가독성이 좋은 코드, 짧은 코드로 리팩토링하는 몇 가지 방법들을 소개해 주셨다.
제일 첫번째 예문을 가지고 왔다. 다른 예문은 영상을 참고하길!

📌 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번씩 접근하고 있다.

📌 switch문

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;가 추가되어 코드가 늘어났다.

📌 switch문, 함수로 분리

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 보다는 성능이 훨씬 좋다. 왜냐면 무조건 딱 한번만 접근할 수 있으니까!
너무너무 좋은 꿀팁을 한번 더 인지하고 넘어가는 것 같아서 좋았다.