자바스크립트 If문 & Switch문 대체

아래 두 예제에서 정의한 get 함수는 Key를 매개변수로 받아 if문과 Switch문을 사용하여 특정 Value값을 반환해준다. 이와 같은 개발 패턴은 매우 자주 사용된다. 하지만 if문과 Switch문을 사용하면 소스 코드가 너무 길어지고 가독성이 떨어진다.

#if문

function get(type) {
     if(type == 'todo') {
          return '할일';
     } else if(type == 'calendar') {
          return '달력';
     } else if(type == 'note') {
          return '공책';
     }
}

#Switch 문
function get2(type) {
     var result = "";
     switch(type) {
          case 'todo':
          result = "할일";
          break;
          case 'calendar':
          result = "달력";
          break;
          case 'note':
          result = "공책";
          break;
     }

     return result;
}

위의 예제에서 구현한 기능은 아래와 같이 매우 간결하게 구현할 수 있다.

function get(type) {
     return {
          todo: '할일',
          calendar: '달력',
          note: '공책'
     }[type];
}

switch는 if에 비해 간결한 코드를 작성할 수 있지만, 비교적 많은 메모리를 사용하고 저버전 IE에서는 처리 성능도 좋지 않다.
최신 버전 IE와 크롬과 같은 고성능 브라우저만 지원하는 서비스라면 이런 부분을 크게 고민하지 않아도 되겠지만,
저버전 IE를 포함한 다양한 환경을 지원해야 하는 서비스라면 switch문의 득과 실에 대해 따져볼 필요가 있다.

• if문은 원하는 조건이 나올 때까지 순차적으로 모든 비교문을 순회하면서 비교
• switch문은 jump-table을 사용하여 한 번에 원하는 곳으로 이동

때문에

• if문은 조건 문의 개수만큼 O(n)의 시간 복잡도를 갖게 되어 성능의 단점
• switch문은 case의 개수만큼 jump-table을 차지하므로 메모리의 단점
  • 저버전 IE에서는 성능에도 문제가 있음
  • case의 조건이 정수형이 아닌 경우(문자열 또는 연산)라면 jump-table을 쓸 수 없어 성능에도 이득 없음 
    
    

Solution: 

• 3개 이하의 조건문에는 if문을 사용한다. 
  확률이 높은 조건을 먼저 비교한다.
• 4개 이상 10개 이하의 조건문은 switch문을 사용한다. 
  고성능 브라우저 지원 환경일 경우에만 해당한다.
  확률이 높은 조건을 먼저 비교하고, 정수형 조건을 사용한다.
• 저버전 IE를 지원해야 하거나 10개 이상의 조건문이라면 객체 리터럴이나 모듈 방식을 사용한다.

- 출처 :  http://blog.jui.io/?cat=5

-출처 :https://github.com/nhnent/fe.javascript/wiki/%EC%95%88%ED%8B%B0-%ED%8C%A8%ED%84%B4