(18) JavaScript - 제어문 / switch문

switch문 (switch statement)

switch문은 어떤 값을 입력했는지에 따라 다르게 동작하는 문법이다.

if문과 비슷하지만 동작하는 방식은 조금 다른데, 기본 구조는 다음과 같다.

 

 

switch (비교할_값) {
        case 조건값_1:

 

▲ switch라는 키워드를 작성한 다음에 소괄호를 열어서 비교할 값을 작성해주고

중괄호를 열어서 그 안에 case라는 키워드 다음에 조건값을 쓰고 콜론(:)을 입력한다.

 

    switch (비교할_값) {
        case 조건값_1:
            동작부분
            break;

▲ 그리고 비교할 값과 조건값이 서로 일치할 때 동작할 코드를 작성한 다음 break 라는 키워드를 입력해준다.

(이 break는조건값에 대한 동작을 마쳤으니 swich문을 빠져나오는 역할을 한다.) 

 

이렇게 하면 switch문에서 한 가지 조건을 완성한다.

    switch (비교할_값) {
        case 조건값_1:
            동작부분
            break;
        case 조건값_2:
            동작부분
            break;
        default:
            동작부분
    }

 ▲ 조건이 필요한 경우 똑같이 case와 조건과 동작코드를 입력하고 break를 작성한다.

그런데 마지막을 보면 default 다음에 콜론이 있다. 

이 부분에서 작성할 동작 코드는 비교할 값이 모든 조건값과도 일치하지않을 경우에

동작할 코드를 작성하는 곳이다. 

위 코드를 예로 들자면 비교할 값이 조건값_1,2 둘다 일치 하지 않으면 동작할 코드를 작성하는 것이다.

조건식을 만족하지 않을 때 동작하는 if문의 else문과 비슷한 역할이다.

마찬가지로 defalut문도 필요에 따라서는 생략이 가능하다.

 

switch의 구조를 알았으니 한번 예시 코드 보자면..

 

    let myChioce = 2;

    switch (myChioce) {
        case 1:
            console.log('토끼를 선택하였습니다');
            break;
        case 2:
            console.log('고양이를 선택하였습니다.');
            break;
        case 3:
            console.log('코알라를 선택하였습니다.');
            break;
        case 4:
            console.log('강아지를 선택하였습니다.');
            break;    
        default:
            console.log('1에서 4사이 숫자를 선택해 주세요');        
    }

▲ 1부터 4까지 숫자를 정해 선택지를 담아둘 변수를 하나 만들고 임의의 숫자를 할당하였다.

그리고 변수를 switch문의 비교할 값에 넣는다.

또한 defult를 사용하여 다른 값을 입력하게 될 경우를 대비해서 문구를 추가하였다.

 

만약 1~4 숫자가 아닌 이상의 숫자를 할당 하면 아래처럼 defult문이 실행된다.

 

만약에 여기서 break문을 모두 지워보면 어떻게 될까?

    let myChioce = 2;

    switch (myChioce) {
        case 1:
            console.log('토끼를 선택하였습니다');
            
        case 2:
            console.log('고양이를 선택하였습니다.');
            
        case 3:
            console.log('코알라를 선택하였습니다.');
            
        case 4:
            console.log('강아지를 선택하였습니다.');
                
        default:
            console.log('1에서 4사이 숫자를 선택해 주세요');        
    }

 

결과가 이상하게 출력된 것을 볼 수가있는데 case 2에서부터 default 까지 모든 동작 부분이 실행된 것이다.

switch문은 조건과 일치하는 경우를 찾은 다음에는 break문을 만나기 전까지

그 아래 모든 동작을 실행하게 된다.

만약 myChoice가 4라면 4부터 default까지 실행이 된다는 얘기다.

 

각각의 case 별로 동작 부분을 작성한 다음 braek를 작성해야 안전하게 switch문을 사용할 수 있다.

(물론 이러한 특징을 활용해서 의도적으로 break문을 생락하여 switch문을 운영할 수도 있다.)

 

▼ 위 switch문을 if문으로 대체할 수도 있다.

    if (myChioce === 1) {
        console.log('토끼를 선택하였습니다');
    } else if (myChioce === 2) {
        console.log('고양이를 선택하였습니다');
    } else if (myChioce === 3 ) {
        console.log('코알라를 선택하였습니다');
    } else if (myChioce === 4) {
        console.log('강아지를 선택하였습니다');        
    } else {
        console.log('1에서 4사이 숫자를 선택해 주세요');
    }

 

정리하자면 어떤 대상과 조건값이 일치하는지를 확인하고

그 결과에 따라 다른 동작이 필요할 때는 switch문을 활용 할 수있다.

---

★GitHub 주소 (switch문)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/7-%EC%A0%9C%EC%96%B4%EB%AC%B8/3.switch%EB%AC%B8.html

JavaScript_soloPlay/Basic/7-제어문/3.switch문.html at main · SeopE9611/JavaScript_soloPlay

 

★ Notion 주소 (switch 예제)

https://purrfect-gargoyle-935.notion.site/switch-10be9530b3e180e4b4d4f96d4df2e2f2?pvs=4

switch문 (티켓 가격 예제) | Notion