[JavaScript] if문의 변환 (if else / switch / 객체 + 함수) feat.코드 리팩토링

들어가며

if문이 여러 줄이 써지는 상황에서 가독성을 고려할 때 어떤 식으로 리팩토링을 해야할지 고민이 있었고 그에 따라 다음과 같은 세가지의 버전을 만들게 되었다. 뭐가 더 좋다라기보다 팀의 컨벤션이 있을 수 있다고 생각된다.

 

• if ... else
• switch
• 객체 + 함수

아래 예제와 같은 경우는 타입에 따른 유저의 로그활동 기록을 보여주는 페이지였고 기존 코드에서 enum을 제외하고 기존 코드보다 이해를 돕기위해 조금 더 단순한 형태로 바꾸어서 작성해 보았다.

 

1. if문 형태

초기에는 타입이 2가지 뿐이었기에 if문으로 작성을 해두었지만 로그 기록 관련 타입이 늘어남에 따라 아래 처럼 코드가 늘어나게 되었다. 이러한 경우에서 논리 연산에 따른 여러가지 조건이 있을 경우 if else를 쓰자는 의견이 있어서 리팩토링을 진행하게 되었다.

if (type === 1) return '로그인'
if (type === 2) return '회원가입'
if (type === 3) return '로그아웃'
if (type === 4) return '회원탈퇴'
if (type === 5) return '이메일인증'
retrun '-'

 

2. if ... else문 형태

기본적으로 else if를 쓰게 되었는데 개인적으로 else if가 여러개 들어가면 가독을 위함이지만 눈으로 보이는 코드의 가독성이 떨어지느 느낌이 아닌가 하는생각이 들었다. 즉, 내재댄 의미를 파악할 수 있는 가독성은 좋아졌지만 한 눈에 들어오는 가독성이 썩 좋아보이지가 않았다.

if (type === 1) '로그인'
esle if (type === 2) '회원가입'
else if (type === 3) '로그아웃'
else if (type === 4) '회원탈퇴'
else if (type === 5) '이메일인증'
else '-'

 

3. switch ... case문 형태

이렇듯 특정한 논리들에 따라 여러가지 값이 나올 때는 오히려 switch case문이 가독성 측면에서 훨씬 낳아보여 팀 전체는 switch문으로 컨벤션을 맞추게 되었다.

switch(type) {
    case 1: '로그인'
         break;
    case 2: '회원가입'
         break;
    case 3: '로그아웃'
         break;
    case 4: '회원탈퇴'
         break;
    case 5: '이메일 인증'
         break;
    default: '-
         break;
}

 

4. 객체 + 함수 형태

하지만 이렇게 코드를 바꾸고 나니 타입이 지금 보다 더 많이 생겨서 20개 30개 이렇게 늘어나게 된다면 객체의 형태로 타입들에 대한 메시지를 정의해주고 함수를 호출하여 진행하면 어떨까라는 생각이 들었다. 그래서 실제로 쓰지는 않았지만 아래와 같은 형태로도 만들어 보았다.

// 본래 코드에서 객체의 키값은 enum으로 지정하여 명시성을 주었다.
const activityTypeList = {
  1: '로그인',
  2: '회원가입',
  3: '로그아웃',
  4: '회원탈퇴',
  5: '이메일 인증',
  ...
  87: 'otp 인증',
}

// 타입이 올 때 함수를 실행시켜 객체에서 일치하는 값을 찾는다.
const getActivityType = (type) => {
  return activityTypeList[type] ? activityTypeList[type] : '-'
}

위 코드처럼 타입에 대한 메시지가 많이 늘어나게 된다면 타입 리스트를 별도로 관리해주는게 추후에 수정에 대한 용이성이 더 있지 않을까 하는 생각이 들었다.

 

다양한 생각을 해볼 수 있는 시간이었고, 고민을 하다보니 결국 정답이 정해져 있는게 아니라 어떤 상황이냐에 따라적절한 방법을 이용 할 수 있도록 다양한 방법을 알고 있는게 중요하다고 생각이 되어졌다.