[Javascript 기초] switch(스위치) - 가온 코딩

switch(스위치)

 

목차

0. 사용 이유

1. 사용 예시

2. break의 필요성

3. else와 똑같은 역할을 하는 default

4. 동일한 결괏값 case 합치기

 

0. 사용 이유

 

스위치는 왜 사용하는 걸까?

사실 swich와 if는 사용에 큰 차이점이 없다.

나는 명확한 단일 케이스별로 구분하고 싶을 때는 case를, 범위별로 구분하고 싶을 때는 if를 사용하는 편이다.

 

아래 코드는 switch로 작성하고, if로 작성한 똑같은 조건이다.

switch(평가){
	case A:
    // A일때 코드
    case B:
    // B일때 코드
	...
}

 

if(평가 == A){
 // A일때 코드
 } else if(평가 == B){
 // B일때 코드
 }

 

 

 

1. 사용 예시

 

만약 사용자에게 어떤 과일을 사고 싶은지 물어보고, 답한 과일에 대해서 가격을 알려주는 코드를 작성한다고 생각해보자

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
	case "사과":
    	console.log("100원 입니다.");
        break;
	case "바나나":
    	console.log("200원 입니다.");
        break;
	case "키위":
    	console.log("300원 입니다.");
        break;
	case "멜론":
    	console.log("500원 입니다.");
        break;
	case "수박":
    	console.log("500원 입니다.");
        break;        
    default:
    	console.log("없는 과일입니다.");
}

이렇게 되면 만약 "사과"를 입력할 경우 "100원 입니다." 를 출력하게 될 것이다.

그리고 없는 과일을 입력할 경우 default로 가게 돼서 "없는 과일입니다."를 출력한다.

 

코드를 더 살펴보자

 

2. break의 필요성

 

코드를 보면 case마다 break가 있다.

왜 있는걸까?

 

한번 없애보자

 

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
	case "사과":
    	console.log("100원 입니다.");
	case "바나나":
    	console.log("200원 입니다.");
	case "키위":
    	console.log("300원 입니다.");
	case "멜론":
    	console.log("500원 입니다.");
	case "수박":
    	console.log("500원 입니다.");      
    default:
    	console.log("없는 과일입니다.");
}

 

이때, 사용자가 "바나나"를 입력하면 어떤 값이 나올까?

"200원입니다."

"300원입니다."

"500원입니다."

"500원입니다."

"없는 과일입니다."

 

이렇게 출력이 된다.

 

왜 나는 바나나 값만 원했는데 뒤에 있는 것까지 같이 오는 건가? switch문은 break를 정해주지 않으면 뒤에 값까지 같이 출력이 된다. case마다 break를 사용해야 하는 이유이다.

 

3. else와 똑같은 역할을 하는 default

 

마지막에 default는 case 중 아무것도 해당되지 않는 값이 들어왔을 때 출력해주는 예외 값이다.

만약 default를 정해주지 않는다면, 이상한 값을 입력해도 그냥 아무것도 출력이 안될 것이다.

그래서 지정해주는 게 좋다.

 

4. 동일한 결괏값 case 합치기

 

코드를 보니 멜론과 수박이 "500원입니다."라는 결괏값으로 똑같다. 이런 경우에는 합쳐줄 수 있다.

let fruit = prompt("무슨 과일을 사고 싶나요?");

switch(fruit){
	case "사과":
    	console.log("100원 입니다.");
        break;
	case "바나나":
    	console.log("200원 입니다.");
        break;
	case "키위":
    	console.log("300원 입니다.");
        break;
	case "멜론":
	case "수박":
    	console.log("500원 입니다.");
        break;        
    default:
    	console.log("없는 과일입니다.");
}

 

 

 

 

참고자료

코딩앙마 - 자바스크립트 기초 강좌 : 100분 완성(https://youtu.be/KF6t61yuPCY)