안녕하세요. 신기한 연구소입니다.
저번 포스팅에 이어 자바스크립트의 조건문 중 하나인 switch문에 대해 알아봅니다.
if...else문과 함께 switch문도 자바스크립트에서 조건문으로 사용됩니다.
if...else문이 궁금하다면 이전 포스팅을 확인해보세요.
2022.06.12 - [Software/JavaScript] - [자바스크립트]if...else문 사용하기 편. (if 조건문)
[자바스크립트]if...else문 사용하기 편. (if 조건문)
안녕하세요. 신기한 연구소입니다. 이번 포스팅은 자바스크립트에서 조건문을 사용하는 방법을 알아봅니다. 조건문은 if...else 문과 switch 문이 있는데 if...else 문 먼저 알아볼게요. 조건문은 언제
tiboy.tistory.com
사실 switch문은 자바스크립트에만 있는 명령어는 아닙니다.
자바(java), C 심지어 sql에서도 switch문을 사용하고 있습니다.
사용법도 거의 같습니다.
하나만 잘 하면 다른 언어도 쉽게 접근할 수 있다는 말이지요.
그럼 switch문의 구조에 대해 알아볼게요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
switch(exp){
case 라벨1:
구문1;
break;
case 라벨1:
구문1;
break;
...
default:
기본구문;
switch(exp){
default:
기본구문;
case 라벨1:
구문1;
break;
case 라벨1:
구문1;
break;
...
|
cs |
두 가지 형식으로 구조를 만들었습니다.
다른 점은 default의 위치입니다.
보통은 처음 구조처럼 default를 마지막에 붙이지만
사실 default는 어디에 위치해도 괜찮습니다.
default는 기본으로 실행하는 구문이거든요.
그래서 break;도 포함되지 않습니다.
그럼 위 구문에 대해 설명해보겠습니다.
switch문 옆 괄호 안 exp는 표현식입니다.
이 표현식(expression)을 자바스크립트는 평가합니다.
평가 후 나온 값을 가지고 case문의 라벨 값과 비교하고
같다면 해당 case의 구문(명령문들)을 실행합니다.
결국 exp는 결괏값을 가지고 있어야 한다는 의미로 보입니다.
그리고 그 결괏값이 가지고 case문을 위에서 하나씩 순서대로 찾아다니며
같은지 확인하고 만약 같다면
그 case가 가지고 있는 구문들을 실행해 주는 구조인 것이지요.
그리고 break문을 만나 switch문을 빠져나가게 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var val = 'a';
switch(val) {
case 'a':
console.log('a');
break;
case 'b':
console.log('b');
console.log(val);
break;
default:
console.log('defalut');
break;
}
|
cs |
이 예제를 보면 swich문의 표현식은 val이고
해당 식의 결과는 'a'다.
그래서 첫 번째 case문이 'a'로 같기에 해당 구문을 실행하고
break문을 통해 빠져나온다.
만약 default문을 선두에 둔다면 break;문을 빼먹으면 안 된다
위 예제에서 default문이 최 하단에 있기에 사실 break문은 생략해도 된다.
그 뒤로 실행될 구문이 없기 때문이다.
만약 val 값이 'a', 'b' 두 값이 아니면 해당 case문의 값과 일치하지 않기에
default를 실행하게 된다.
break문
위 예제에 보면 case문의 마지막 위치에 break문이 있다.
case문이 실행되었다면 break문으로 해당 switch문을 종료하겠다는 의미이다.
그런데 사실 break문은 선택이다.
위 예제에서 break문을 뺀다고 해서 오류가 발생하지는 않는다.
하지만 문제가 발생하게 된다.
break문이 없다면 선택된 case문이 실행되고 난 후 switch문이 종료되지 않고
바로 다음 case문으로 이동하게 되고 case문의 값과 비교 절차를 생략한 채
구문만 실행하게 된다.
그렇다면 break문을 안 써야 하는 경우가 있을까?
다음 예제를 살펴본다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var val = '양념치킨';
switch(val) {
case '후라이드':
console.log('15,000원');
break;
case '양념치킨':
case '간장치킨':
console.log('16,000원');
break;
default:
console.log('메뉴없음');
}
|
cs |
치킨집 메뉴 선택 가격 결정 switch문을 만들어봤습니다.
후라이드는 15,000원이고 양념과 간장치킨은 16,000원입니다.
양념과 간장은 가격이 같습니다.
중복해서 구현할 필요 없이 위 예제처럼 break문을 사용하지 않는다면
다음 case문인 간장치킨의 구문을 같이 사용할 수 있게 됩니다.
지금까지 자바스크립트 조건문 중 하나인 switch문에 대해 알아봤습니다.
즐 코딩하세요.
'Software > JavaScript' 카테고리의 다른 글
| [자바스크립트]for..in문과 for..of문 알아보기 편. (루프와 반복) (0) | 2022.06.25 |
|---|---|
| [자바스크립트]for문 사용하기 편. (루프와 반복) (0) | 2022.06.22 |
| [자바스크립트]if...else문 사용하기 편. (if 조건문) (0) | 2022.06.12 |
| [자바스크립트] 리터럴(literal) 쉽게 이해하기 편. with javascript (1) | 2022.05.24 |
| [초보코딩]자바스크립트 사용하기 편. -Javascript (0) | 2022.04.25 |
