The switch keyword

The switch keyword

else if statements are a great tool if we need to check multiple conditions. In programming, we often find ourselves needing to check multiple values and handling each of them differently. For example:

 

let groceryItem = 'papaya'; 

if (groceryItem === 'tomato') { 
	console.log('Tomatoes are $0.49'); 
} else if (groceryItem === 'papaya'){ 
	console.log('Papayas are $1.29'); 
} else { 
	console.log('Invalid item'); 
}

 

In the code above, we have a series of conditions checking for a value that matches a groceryItem variable. Our code works fine, but imagine if we needed to check 100 different values! Having to write that many else if statements sounds like a pain!

A switch statement provides an alternative syntax that is easier to read and write. A switch statement looks like this:

 

let groceryItem = 'papaya'; 

switch (groceryItem) { 
	case 'tomato': 
		console.log('Tomatoes are $0.49'); 
		break; 
	case 'lime': 
		console.log('Limes are $1.49'); 
		break; 
	case 'papaya': 
		console.log('Papayas are $1.29'); 
		break; 
	default: 
		console.log('Invalid item'); 
		break; 
} 

// Prints 'Papayas are $1.29'

 

 

• The switch keyword initiates the statement and is followed by ( ... ), which contains the value that each case will compare. In the example, the value or expression of the switch statement is groceryItem.
• Inside the block, { ... }, there are multiple cases. The case keyword checks if the expression matches the specified value that comes after it. The value following the first case is 'tomato'. If the value of groceryItem equalled 'tomato', that case‘s console.log() would run.
• The value of groceryItem is 'papaya', so the third case runs— Papayas are $1.29 is logged to the console.
• The break keyword tells the computer to exit the block and not execute any more code or check any other cases inside the code block. Note: Without the break keyword at the end of each case, the program would execute the code for all matching cases and the default code as well. This behavior is different from if/else conditional statements which execute only one block of code.
• At the end of each switch statement, there is a default statement. If none of the cases are true, then the code in the default statement will run.

 

출처: 코드카데미

---

문법

 

• switch문은 하나 이상의 case문으로 구성됩니다. 대개 default문도 있지만, 이는 필수는 아니다.
• case문 안에 break문이 없으면 조건에 부합하는지 여부를 따지지 않고 이어지는 case문을 실행한다.

//예시
let a = 2 + 2;

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

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

 

자료형의 중요성

switch문은 일치 비교로 조건을 확인한다.

비교하려는 값과 case문의 값의 형과 값이 같아야 해당 case문이 실행된다.

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

 

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문이 실행된다.

 

---

if문을 switch 문으로 변환하기

let a = +prompt('a?', '');

if (a == 0) {
  alert( 0 );
}
if (a == 1) {
  alert( 1 );
}

if (a == 2 || a == 3) {
  alert( '2,3' );
}

let a = +prompt('a?', '');

switch (a) {
  case 0:
    alert( 0 );
    break;

  case 1:
    alert( 1 );
    break;

  case 2:
  case 3:
    alert( '2,3' );
    break;
}

 

 

 

 

출처 : https://ko.javascript.info/switch

switch문