[TOAST] 자바스크립트에서 switch (true) 패턴 사용하기를 읽고

https://ui.toast.com/weekly-pick/ko_20210603

자바스크립트에서 switch (true) 패턴 사용하기 | TOAST UI :: Make Your Web Delicious!

 

switch문의 식을 true로 주게 되면, 문자열이 아닌 표현식의 성립 여부로 조건을 검사할 수 있다는 내용이었다.

알아만놓고 딱히 사용하지 않은 패턴이었다.

왜 그런가 생각해보니 if / else를 가독성을 해칠 정도로 사용해본 적이 없어서 그랬나보다 :)

 

대략적인 사용 예시는 본문에도 나와있지만 연습겸 다시 만들어보면 아래와 같다.

 

const num = 33;
let text = '';
switch(true) {
  case num < 0:  text = '음수 입니다.'; break;
  case num < 5:  text = '5이하의 숫자 입니다.';  break;
  case num < 10: text = '10이하의 숫자 입니다.'; break;
  case num < 30: text = '30이하의 숫자 입니다.'; break;
  case num < 50: text = '50이하의 숫자 입니다.'; break;
  case num < 99: text = '99이하의 숫자 입니다.'; break;
}
console.log(`변수 num은 ${text}`);

 

이런 실사용성 제로의 예시보다는 본문처럼 회원가입 시 유효성 검사에 활용하면 괜찮겠다는 생각이 들었다.

이전 회사에서도 약 10여개 항목에 대한 유효성 검사를 무수히 많은 if로 처리했었는데 switch를 사용하면 가독성이 개선 되었을듯!

 

다만 위의 예시처럼 적은 조건은 if / else를 사용한다고 가독성이 나쁘진 않으니 or 조건이 많아질 때, 고려해보자.

 

const num = 33;
let text = '';
if(num < 0) {
  text = '음수 입니다.';
} else if(num < 5) {
  text = '5이하의 숫자 입니다.';
} else if(num < 10) {
  '10이하의 숫자 입니다.';
} else if(num < 30) {
  '30이하의 숫자 입니다.';
} else if(num < 50) {
  '50이하의 숫자 입니다.';
} else if(num < 99) {
  '99이하의 숫자 입니다.';
}
console.log(`변수 num은 ${text}`);