switch-case, if-else OR object-literals

왜 고민했을까?
UI 라이브러리를 만들다가 고민에 빠진 점이 있다.

  // 1번 - switch case
  switch (status) {
    case 'success':
      return COLORS.SUCCESS;
    case 'error':
      return COLORS.ERROR;
    case 'warning':
      return COLORS.WARNING;
    case 'info':
      return COLORS.INFO;
    default:
      return COLORS.primary;
  }
  // 2번 - object-literal
  const getAlertColor = (status) => {
    const ALERT_STATUS = {
      'success': COLORS.SUCCESS,
      'error': COLORS.ERROR,
      'warning': COLORS.WARNING,
      'info': COLORS.INFO
    }
    return ALERT_STATUS[status] ?? COLORS.primary
  }

• UI 라이브러리를 팀원들과 같이 작성하며 두 개의 코딩 스타일이 등장하여 어떤 방법이 더 효율적이고 가독성이 있는지 궁금해졌다.

if-else

let color = ''
if (emotion === 'happy') color = 'yellow'
else if (emotion === 'sad') color = 'blue'
else if (emotion === 'angry') color = 'red'
else color = 'white'

원하는 조건이 나올 때까지 순차적으로 모든 경우의 수를 하나씩 비교한다. 따라서 O(n)의 시간복잡도를 가지게 되어 case들이 늘어날수록 성능에 악영향을 미친다. 개인적으로 3개 case 이상의 경우 가독성 측면에서도 switch-case문과 비교해서 떨어진다는 생각이 든다.

switch-case

let color = '';

switch (emotion) {
  case 'happy':
    color = 'yellow';
    break;
  case 'sad':
    color = 'blue';
    break;
  case 'angry':
    color = 'red';
    break;
  default:
    color = 'white';
}

if문과 다르게 jumping-table을 사용하여 원하는 case로 평가가 진행된다. 다만, case의 개수만큼 jump-table을 차지하므로 메모리를 차지한다는 단점이 존재한다.

실제로 8개의 조건이 있다고 가정하고 테스트해보자

• jsperf를 활용한 테스트
• 8개의 테스트 케이스를 활용했습니다.(테스트케이스가 매우 적다는 점을 알아두자)
• 두 개의 모델 모두 default 값이 있다고 가정하여 나온 실행 결과다.
  
• 실제로 실행해본 결과 switch-case와 object literal의 큰 차이점은 없다는 것을 느꼈다.

결론

if-else, switch-case, object-literal(Map) 3가지 방법 중 한 가지로 통일해서 사용하는 것보다 상황에 맞게 유연하게 사용하는 것이 좋을 것 같다.
3개 이하의 case들을 비교할 때는 if-else문이 가장 좋다. (하지만 고려해야 할 사항들이 존재)

• 추후에 추가로 case들을 더할 경우: 리팩토링 측면에서 if-else 문은 사용하지 않는 것이 좋다.
• 같은 value을 공유하는 key들이 존재할 경우: object-literal 보다는 switch-case가 좋다.
• 굉장히 많은 case들이 존재할 경우: (개인적인 의견) 코드의 길이가 짧아져 가독성이 좋은 object-literal을 선호한다.

출처

Switch case, if else or a lookup map
개인적으로 여러 블로그와 글들을 찾아봤지만 논쟁거리가 많았고 가장 옳다고 생각되는 글을 가져왔다.

틀린 정보가 있다면 말해주세요! :)