Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 자바
- 리액트
- 자바스크립트
- 우아한테크캠프 4기
- npm
- ES6
- 자바스크립트 객체
- 개인 프로젝트
- 모듈 배포하기
- 우아한테크코스
- 회고의 회고
- express
- CSS
- AWS
- 레인지 슬라이더
- 주간 회고
- 인사이드 자바스크립트
- 우아한테크캠프
- html
- 코드스쿼드
- 토이프로젝트
- 알고리즘
- 우아한형제들
- 함수
- Hello Coding HTML5+CSS3
- 토이 프로젝트
- toast
- 러닝 자바스크립트
- 네이버 테크 콘서트
- 프로그래머스
Archives
- Today
- Total
블로그
[TOAST] 자바스크립트에서 switch (true) 패턴 사용하기를 읽고 본문
https://ui.toast.com/weekly-pick/ko_20210603
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}`);
'아티클' 카테고리의 다른 글
[LINE Engineering] TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다. 를 읽고 (0) | 2021.05.31 |
---|---|
[TOAST] React.memo() 현명하게 사용하기를 읽고 (1) | 2021.04.18 |
[TOAST] 더 나은 UX를 위한 React에서 스켈레톤 컴포넌트 만들기를 읽고 (0) | 2021.04.17 |
[우아한형제들] 팀 문화의 탄생을 읽고 (0) | 2021.04.12 |
[토스트] 리액트 useEffect: 개발자가 알아야 할 네가지 팁을 읽고 (0) | 2021.04.08 |
Comments