[인프런] Javascript입문 - 조건문2: switch-case , if문과 비교, switch-case 조건 범위로 설정하기

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

 

switch-case 문법

- if문과 더불어 많이 사용하는 분기문/조건문. ( = 코드의 진행방향을 바꾸는 명령! ) 

- 변수에 저장된 값에 따라 각각 다른 코드를 실행하는 분기문입니다.

- if문 만큼 자주 사용되진 않지만, 상황에 따라 if 와 else if를 반복적으로 써야 하는 상황을 피하게 해 줍니다.
그렇기 때문에 switch-case 를 알면 더 나은 코드를 짤 수 있게 된다.

문법

var value;
switch(value) {
    case 값1: 
    //value == 값1일 경우 실행할 코드
    break; 
    case 값2:
    //value == 값2일 경우 실행할 코드 
    break;
    //... 
    default: 
    //위쪽에 해당되지 않는 경우 실행할 코드
}

var value; 로 변수 값을 선언.
switch(변수명) { // 변수의 값에 따라서 실행되는 코드가 달라진다!
case 값1 :
// value == 값1일 경우 실행할 코드
break;
case 값2 : 
// value == 값2일 경우 실행할 코드
break;
...
default :
// 위의 경우들(value=값1/값2/..) 모두에 해당되지 않을 때 실행할 코드.
}

❗ switch-case문에서 case와 break는 쌍으로 존재한다.
case와 case 사이에는 반드시 break를 넣어주어야 코드가 제대로 작동한다.
(break없이 switch-case문을 사용할 수도 있지만 그건 응용버전! 나중에 배우기)

✔ break;는 1. 루프를 빠져나갈 때 2. switch를 빠져나갈 때 둘 다 사용된다.

 

++ 만약 switch-case문에서 case별 조건을 "일치=="가 아닌 "범위 > < <= >= .." 로 설정하고 싶다면,
아래와 같은 형식으로 짜면 된다.

 

var value; 로 변수 값을 선언.
switch(true) { // case에서 범위를 판단하고 싶을 때는 switch() 소괄호 안에 true를 넣는다.
case (value>범위) : // case별로 소괄호 안에 범위 조건을 적는다.
// value == 값1일 경우 실행할 코드
break;
case (value>범위 && value<=범위) : 
// value == 값2일 경우 실행할 코드
break;
...
default :
// 위의 경우들(value=값1/값2/..) 모두에 해당되지 않을 때 실행할 코드.
}

 

---

 

예제

Q. 점수가 10점이면 A, 9점이면 B, 그 외에는 C를 출력하는 코드를 작성하세요.

 

if로 구현

var score = prompt('점수를 입력하세요'); 
if (score === 10) { 
	console.log('A'); 
} else if (score == 9) {
	console.log('B'); 
} else {
	console.log('C'); 
}

 

switch-case 로 구현

var score = prompt('점수를 입력하세요');
switch (score) { 
    case 10:
    console.log('A');
    break; 
    case 9:
    console.log('B');
    break; 
    default:
    console.log('C'); 
}

 

 

+ 심화학습

혼자서 만들고 구글링으로 푼 심화 문제.

Q. 점수가 10점 이상이면 A+, 5점 이상 10점 미만이면 B+, 5점 미만이면 C+를 출력하는 코드를 작성하세요.

var score = prompt("점수를 입력하세요");
    switch (true) {
        case (score >= 10):
            console.log("10점 이상은 A+입니다");
            break;
        case (score >= 5 && score < 10):
            console.log("5점 이상 10점 미만은 B+입니다");
            break;
        default:
            console.log("5점 미만은 모두 C+입니다");
    }