# switch문

복수의 `if` 조건문은 `switch`문으로 바꿀 수 있습니다.

`switch`문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다. 코드 자체가 비교 상황을 잘 설명한다는 장점도 있습니다.

### [문법](https://ko.javascript.info/switch#ref-288)

`switch`문은 하나 이상의 `case`문으로 구성됩니다. 대개 `default`문도 있지만, 이는 필수는 아닙니다.

예시:

```javascript
switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}
```

* 변수 `x`의 값과 첫 번째 `case`문의 값 `'value1'`를 일치 비교한 후, 두 번째 `case`문의 값 `'value2'`와 비교합니다. 이런 과정은 계속 이어집니다.
* `case`문에서 변수 `x`의 값과 일치하는 값을 찾으면 해당 `case` 문의 아래의 코드가 실행됩니다. 이때, `break`문을 만나거나 `switch` 문이 끝나면 코드의 실행은 멈춥니다.
* 값과 일치하는 `case`문이 없다면, `default`문 아래의 코드가 실행됩니다(`default` 문이 있는 경우).

### [예시](https://ko.javascript.info/switch#ref-289)

실제 실행 가능한 `switch`문 예시를 살펴봅시다. 아래 예시에선 강조된 코드가 실행됩니다.

```javascript
let a = 2 + 2;

switch (a) {
  case 3:
    alert( '비교하려는 값보다 작습니다.' );
    break;
  case 4:
    alert( '비교하려는 값과 일치합니다.' );
    break;
  case 5:
    alert( '비교하려는 값보다 큽니다.' );
    break;
  default:
    alert( "어떤 값인지 파악이 되지 않습니다." );
}
```

`switch`문은 a의 값인 4와 첫 번째 `case`문의 값인 3을 비교합니다. 두 값은 같지 않기 때문에 다음 `case`문으로 넘어갑니다.

a와 그다음 `case`문의 값인 4는 일치합니다. 따라서 `break`문을 만날 때까지 `case 4` 아래의 코드가 실행됩니다.

**`case`문 안에 `break`문이 없으면 조건에 부합하는지 여부를 따지지 않고 이어지는 `case`문을 실행합니다.**

`break`문이 없는 경우 어떤 일이 일어나는지 예시를 통해 살펴봅시다.

```javascript
let a = 2 + 2;

switch (a) {
  case 3:
    alert( '비교하려는 값보다 작습니다.' );
  case 4:
    alert( '비교하려는 값과 일치합니다.' );
  case 5:
    alert( '비교하려는 값보다 큽니다.' );
  default:
    alert( "어떤 값인지 파악이 되지 않습니다." );
}
```

위 예시를 실행하면 아래 3개의 `alert`문이 실행됩니다.

```javascript
alert( '비교하려는 값과 일치합니다.' );
alert( '비교하려는 값보다 큽니다.' );
alert( "어떤 값인지 파악이 되지 않습니다." );
```

`switch/case`문의 인수엔 어떤 표현식이든 올 수 있습니다.

`switch`문과 `case`문은 모든 형태의 표현식을 인수로 받습니다.

예시:

```javascript
let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("표현식 +a는 1, 표현식 b+1는 1이므로 이 코드가 실행됩니다.");
    break;

  default:
    alert("이 코드는 실행되지 않습니다.");
}
```

표현식 +a를 평가하면 1이 됩니다. 이 값은 첫 번째 `case`문의 표현식 `b + 1`을 평가한 값(1)과 일치하죠. 따라서 첫 번째 `case`문 아래의 코드가 실행됩니다.

### [여러 개의 "case"문 묶기](https://ko.javascript.info/switch#ref-290)

코드가 같은 `case`문은 한데 묶을 수 있습니다.

`case 3`과 `case 5`에서 실행하려는 코드가 같은 경우에 대한 예시를 살펴봅시다.

```javascript
let a = 3;

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;

  case 3: // (*) 두 case문을 묶음
  case 5:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;

  default:
    alert('계산 결과가 이상하네요.');
}
```

`case 3`과 `case 5`는 동일한 메시지를 보여줍니다.

`switch/case`문에서 `break`문이 없는 경우엔 조건에 상관없이 다음 `case`문이 실행되는 부작용이 발생합니다. 위 예시에서 `case 3`이 참인 경우엔 `(*)`로 표시한 줄 아래의 코드가 실행되는데, 그 아래 줄엔 `case 5`가 있고 `break`문도 없기 때문에 12번째 줄의 `break`문을 만날 때까지 코드는 계속 실행됩니다.

### [자료형의 중요성](https://ko.javascript.info/switch#ref-291)

switch문은 일치 비교로 조건을 확인합니다. 비교하려는 값과 `case`문의 값의 형과 값이 같아야 해당 `case`문이 실행됩니다.

예시를 통해 switch문에서 자료형이 얼마나 중요한지 살펴보도록 합시다.

```javascript
let arg = prompt("값을 입력해주세요.");
switch (arg) {
  case '0':
  case '1':
    alert( '0이나 1을 입력하셨습니다.' );
    break;

  case '2':
    alert( '2를 입력하셨습니다.' );
    break;

  case 3:
    alert( '이 코드는 절대 실행되지 않습니다!' );
    break;
  default:
    alert( '알 수 없는 값을 입력하셨습니다.' );
}
```

1. `0`이나 `1`을 입력한 경우엔 첫 번째 `alert`문이 실행됩니다.
2. `2`를 입력한 경우엔 두 번째 `alert`문이 실행됩니다.
3. `3`을 입력하였더라도 세 번째 `alert`문은 실행되지 않습니다. 앞서 배운 바와 같이 `prompt` 함수는 사용자가 입력 필드에 기재한 값을 문자열로 변환해 반환하기 때문에 숫자 `3`을 입력하더라도 `prompt` 함수는 문자열 `'3'`을 반환합니다. 그런데 세 번째 `case`문에선 사용자가 입력한 값과 숫자형 3을 비교하므로, 형 자체가 다르기 때문에 `case 3` 아래의 코드는 절대 실행되지 않습니다. 대신 `default`문이 실행됩니다.

\
출처 : [Modern Javascript 튜토리얼](https://ko.javascript.info/switch)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nbcamp.gitbook.io/javascript-handbook/part-02./switch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.