[jstips] 중첩된 조건문 개선 if, switch

중첩된 조건문 개선

jstips에서 javascript를 사용할 때 중첩된 if문을 조금 더 깔끔하고 효율적으로 만들 수 있을지에 대해서 읽었습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14



if (color) {
  if (color === 'black') {
    printBlackBackground();
  } else if (color === 'red') {
    printRedBackground();
  } else if (color === 'blue') {
    printBlueBackground();
  } else if (color === 'green') {
    printGreenBackground();
  } else {
    printYellowBackground();
  }
}

우선 중첩된 if문을 개선하는 방법 중에 하나는 switch문을 사용하는 것입니다. switch문을 사용하면 더 짧고 깔끔하게 만들 수 잇지만 **break;**를 생략하는 것과 같은 오류를 디버깅하기에 어렵기 때문에 사용하지 않는 것이 좋습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18




switch(color) {
  case 'black':
    printBlackBackground();
    break;
  case 'red':
    printRedBackground();
    break;
  case 'blue':
    printBlueBackground();
    break;
  case 'green':
    printGreenBackground();
    break;
  default:
    printYellowBackground();
}

조건문에 여러 가지 조건이 들어가는 경우에도 조건문을 짧고 깔끔하게 쓰고 싶다면 switch를 사용할 수 있습니다. 이 경우에는 switch문의 파라미터로 true를 넣고, case에 아래처럼 조건을 넣으면 가능합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18



switch(true) {
  case (typeof color === 'string' && color === 'black'):
    printBlackBackground();
    break;
  case (typeof color === 'string' && color === 'red'):
    printRedBackground();
    break;
  case (typeof color === 'string' && color === 'blue'):
    printBlueBackground();
    break;
  case (typeof color === 'string' && color === 'green'):
    printGreenBackground();
    break;
  case (typeof color === 'string' && color === 'yellow'):
    printYellowBackground();
    break;
}

리팩토링 같은 걸 생각할 필요가 없다면, 각 색의 함수를 만드는 것 대신에 색을 인수로 갖는 함수를 만들어서 해결할 수도 있습니다.

1
2
3
4
5
6



function printBackground(color) {
  if (!color || typeof color !== 'string') {
    return; // Invalid color, return immediately
  }
}

그러나 만약 리팩토링도 생각해야 한다면, 여러번 조건을 확인하고 swtich문을 사용하는 것을 피해야 합니다.

결론

중첩된 if문을 개선하는 가장 효율 적인 방법은 object를 사용하는 방법입니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12



var colorObj = {
  'black': printBlackBackground,
  'red': printRedBackground,
  'blue': printBlueBackground,
  'green': printGreenBackground,
  'yellow': printYellowBackground
};

if (color in colorObj) {
  colorObj[color]();
}

중첩된 조건문 개선

결론

Related Posts