코딩을 하다보면 if-else문을 사용하기에는 조건의 종류가 너무 많은 경우가 생긴다.
a라는 변수의 값의 조건이 n개 이상의 분기를 만들어낼 경우가 그러한 경우인데 그때에는 if-else문을 사용하기보다는 switch-case문을 사용하는것이 보다 깔끔하다.
switch-case문
JavaScript에서 조건을 처리할 때 가장 자주 사용하는 구조는 if-else 문이다. 하지만 조건이 많아지면 코드가 복잡해지고 가독성이 떨어질 수 있어서 대안으로 사용할 수 있는 것이 바로 switch-case 문이다.
switch-case문은 하나의 표현식(expression)을 평가하여 여러 가지 값에 대해 조건을 처리한다. 가독성이 뛰어나고 다양한 경우(case)를 쉽게 처리할 수 있기 때문에 실무에서 매우 유용.
switch-case문 사용법과 예제
1. 기본 구조
switch-case 문은 다음과 같은 기본 구조를 가지고 있다.
switch (expression) {
case value1:
// value1에 해당하는 코드 실행
break;
case value2:
// value2에 해당하는 코드 실행
break;
default:
// 위 조건에 해당하지 않을 때 실행
break;
}
여기서 expression
은 비교할 값이고, 각 case
는 조건에 따라 실행할 코드를 정의한다. 조건에 해당하는 코드를 실행한 후에는 break
를 사용하여 switch문을 종료한다. default
는 조건이 모두 일치하지 않을 때 실행된다.
2. 숫자를 사용하는 예제
요일을 숫자로 표현하고 이에 따라 다른 메시지를 출력
let day = 3;
switch (day) {
case 1:
console.log("월요일");
break;
case 2:
console.log("화요일");
break;
case 3:
console.log("수요일");
break;
default:
console.log("유효하지 않은 요일");
break;
}
고로 day
가 3일 경우 "수요일"이 출력됩니다.
3. 문자열을 사용하는 예제
명령어를 문자열로 받고, 이에 따른 동작을 처리
let command = "start";
switch (command) {
case "start":
console.log("시작");
break;
case "stop":
console.log("정지");
break;
case "pause":
console.log("일시 정지");
break;
default:
console.log("알 수 없음");
break;
}
4. 여러 case를 묶어서 처리
비슷한 조건을 묶어 처리할 수도 있다
let fruit = "apple";
switch (fruit) {
case "apple":
case "pear":
case "peach":
console.log("이 과일은 사과종류");
break;
case "banana":
case "mango":
console.log("이 과일은 열대 과일 종류");
break;
default:
console.log("알 수 없는 과일");
break;
}
위 코드에서 "apple" 또는 "pear"가 입력되면 "이 과일은 사과종류"가 출력
5. 조건 표현식을 사용하는 고급 예제
switch 문은 단순 값 비교에 적합하지만, 조건식과 함께 사용할 수도 있다.
let score = 85;
switch (true) {
case score >= 90:
console.log("A 학점");
break;
case score >= 80:
console.log("B 학점");
break;
case score >= 70:
console.log("C 학점");
break;
default:
console.log("F 학점");
break;
}
switch-case문의 장점과 활용 팁
switch-case 문은 다중 조건을 효율적으로 처리할 수 있다. 특히, 조건이 많거나 동일한 작업을 여러 값에 대해 수행해야 할 때 유용하다.
하지만 복잡한 조건이 필요한 경우에는 if-else
문이나 다른 논리 구조를 사용하는 것이 더 나을 수 있다. 적절한 상황에 맞게 switch-case문을 사용하는 것이 중요하다.
'공부방 > JavaScript' 카테고리의 다른 글
insertAdjacentHTML vs innerHTML 차이점(보안) (0) | 2024.06.22 |
---|