출처 : https://javascript.info/switch
The "switch" statement
javascript.info
switch 문
switch 문은 여러 개의 if 조건문을 대체할 수 있는 구문임.
여러 가지 경우에 대해 값을 비교하는 것 보다 설명적인 방식을 제공함.
문법
switch문은 하나 이상의 case 블록과 선택적인 default 블록을 가질 수 있음.
문법은 다음과 같음 :
switch(x) {
case 'value1': // if (x === 'value1') 와 동일
...
[break]
case 'value2': // if (x === 'value2') 와 동일
...
[break]
default:
...
[break]
}
여기서 x의 값은 먼저 첫 번째 case의 값 ( 즉 , value 1 ) 과 엄격하게 비교되고 , 그 다음 두 번째 case의 값 (value 2) 과 비교되는 식으로 진행됨.
만약 일치하는 경우가 발견되면 , switch문은 해당 case부터 가장 가까운 break 문 (또는 switch문의 끝)까지의 코드를 실행함.
일치하는 case가 없다면 , default 블록의 코드가 실행됨. ( 존재할 경우)
예제
다음은 switch 문 예제로, 실행되는 코드가 강조되어 있음. :
let a = 2 + 2;
switch (a) {
case 3:
alert( 'Too small' );
break;
case 4:
alert( 'Exactly!' );
break;
case 5:
alert( 'Too big' );
break;
default:
alert( "I don't know such values" );
}
여기서 switch 문은 먼저 a의 값 ( 즉 , 4)를 case 3과 비교함. 일치하지 않으므로 넘어가고 그 다음 case 4와 비교하여 일치하므로 case 4의 코드부터 실행함.
만약 break가 없다면 해당 case 이후의 case들도 break를 만날 떄까지 순차적으로 실행됨.
break 없이 실행하는 예제
let a = 2 + 2;
switch (a) {
case 3:
alert( 'Too small' );
case 4:
alert( 'Exactly!' );
case 5:
alert( 'Too big' );
default:
alert( "I don't know such values" );
}
위 예제에서는 일치하는 case 4 부터 break가 없으므로 아래 case 5와 default의 코드도 순차적으로 실행되어
다음과 같이 alert가 연속적으로 실행됨.
alert( 'Exactly!' );
alert( 'Too big' );
alert( "I don't know such values" );
switch/case의 인자로는 임의의 표현식 사용 가능
switch와 case는 임의의 표현식을 허용함.
예를 들어 :
let a = "1";
let b = 0;
switch (+a) {
case b + 1:
alert("this runs, because +a is 1, exactly equals b+1");
break;
default:
alert("this doesn't run");
}
여기서 = a는 1을 반환하며 , 이는 case에 사용된 b + 1(즉 , 0 + 1)과 비교되어 일치하므로 해당 코드가 실행됨.
case 묶기
여러 case가 같은 코드를 실행하도록 묶을 수 있음.
예를 들어 case 3과 case 5에서 같은 코드를 실행하고자 할 때 :
let a = 3;
switch (a) {
case 4:
alert('Right!');
break;
case 3: // (*) 두 개의 case를 묶음
case 5:
alert('Wrong!');
alert("Why don't you take a math class?");
break;
default:
alert('The result is strange. Really.');
}
만약 switch 값이 3이나 5일 때 같은 결과를 반환할 수 있음.
위 예제에서는 a가 3일 때 case 3부터 실행되고 break가 나타날때 까지 case 5의 코드까지 실행되어 같은 메시지를 출력함.
자료형이 중요함
switch 문은 항상 엄격한 비교 ( ===) 를 사용함.
따라서 두 값이 자료형까지 동일해야 일치함.
예를 들어 아래 코드 :
let arg = prompt("Enter a value?");
switch (arg) {
case '0':
case '1':
alert( 'One or zero' );
break;
case '2':
alert( 'Two' );
break;
case 3:
alert( 'Never executes!' );
break;
default:
alert( 'An unknown value' );
}
사용자가 0 또는 1을 입력하면 첫 번쨰 alert가 실행됨.
사용자가 2를 입력하면 두 번째 alert가 실행됨.
하지만 사용자가 3을 입력해도 prompt는 문자열 "3"을 반환하므로 case 3의 숫자 3과는 엄격하게 일치하지 않아 실행되지 않고 default 블록이 실행됨.
과제
다음 switch 문과 동일한 기능을 하는 if ... else 문 만들기
switch (browser) {
case 'Edge':
alert( "You've got the Edge!" );
break;
case 'Chrome':
case 'Firefox':
case 'Safari':
case 'Opera':
alert( 'Okay we support these browsers too' );
break;
default:
alert( 'We hope that this page looks ok!' );
}
짠 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
browser = prompt("입력","입력")
if(browser == 'Edge'){
alert( "You've got the Edge!" );
}
else if(browser == 'Chrome' || browser == 'Firefox'|| browser == 'Safari' || browser == 'opera' ){
alert( 'Okay we support these browsers too' );
}
else{
alert( 'We hope that this page looks ok!' );
}
</script>
</body>
</html>
2. 아래 코드를 단일 switch 문을 사용하여 다시 작성
let a = +prompt('a?', '');
if (a == 0) {
alert( 0 );
}
if (a == 1) {
alert( 1 );
}
if (a == 2 || a == 3) {
alert( '2,3' );
}
짠 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = +prompt('a?', '');
switch(a){
case 0 :
alert( 0 );
break;
case 1 :
alert( 1 );
break;
case 2 :
case 3 :
alert( '2,3' );
break;
}
</script>
</body>
</html>
'언어' 카테고리의 다른 글
| Function expressions (JavaScript) (0) | 2025.03.14 |
|---|---|
| Functions (JavaScript) (0) | 2025.03.14 |
| Loops: while and for (0) | 2025.03.14 |
| Nullish coalescing operator '??' (JavaScript) (0) | 2025.03.13 |
| Logical operators (JavaScript) (0) | 2025.03.12 |
