자바스크립트의 switch 문은 여러 개의 if else 문을 하나로 묶은 형태라고 할 수 있습니다. if 문처럼 조건식을 받지만, 하나의 표현식 결과와 일치하는 여러 조건(케이스)을 두고 각각 다른 코드 블록을 실행할 수 있다는 점이 특징입니다.
조건문은 프로그래밍의 필수 요소로, 컴퓨터 프로그램의 흐름을 제어하는 데 사용됩니다. 자바스크립트에서 가장 널리 쓰이는 조건문은 if와 if...else 코드 블록으로, 특정 조건(또는 조건들의 집합)이 충족될 때만 코드를 실행하도록 만들 수 있습니다.
그런데 자바스크립트에는 하나의 표현식을 여러 조건과 비교해 평가할 수 있는 또 다른 조건문이 내장되어 있는데, 바로 switch 문입니다. switch 문은 주어진 조건이 여러 케이스 중 어느 것에 해당하는지 검사하고, 일치하는 케이스의 코드 블록을 실행합니다.
이번 튜토리얼에서는 자바스크립트 switch 문을 활용해 조건문을 작성하는 방법을 알아보고, 나아가 여러 케이스를 함께 사용해 더 발전된 표현식을 만드는 방법까지 살펴보겠습니다.
자바스크립트 조건문 복습
조건문을 사용하면 특정 조건이 충족될 때만 코드를 실행하고, 그렇지 않으면 해당 코드 블록을 건너뛰도록 만들 수 있습니다. 조건문은 참(true)과 거짓(false)의 평가 결과를 바탕으로 조건 충족 여부를 판단합니다.
예를 들어 주문 페이지의 모든 폼에 사용자가 값을 입력했는지 확인하거나, 로그인한 사용자에게만 상품 할인 안내 메시지를 보여주는 등의 상황에서 조건문이 유용하게 활용됩니다.
자바스크립트에서 가장 흔한 조건문은 if 문입니다. if 문은 명제가 참인지 거짓인지 평가하고, 참일 때만 코드를 실행합니다. 다음은 자바스크립트 if 문의 예시입니다.
var age = 17;
if (age >= 16) {
console.log("당신은 16세 이상입니다!");
}
이 코드를 실행하면 다음과 같은 결과가 출력됩니다: "당신은 16세 이상입니다!"
if 문에는 여러 조건을 연달아 검사할 수 있는 else if 문도 함께 사용할 수 있습니다. 자바스크립트 if / else 문에 대해 더 깊이 알고 싶다면 관련 튜토리얼을 참고해 보세요.
이제 조건문의 기본기를 다졌으니, 본격적으로 switch 문을 살펴보겠습니다.
자바스크립트 switch 문 기본 문법
자바스크립트 switch 문은 표현식을 평가하고, 그 결과와 일치하는 코드 블록을 실행합니다. switch 문은 명제가 참인지 검사한 뒤 참이면 실행한다는 점에서 if 문과 비슷하게 동작합니다.
switch 문은 다음과 같은 문법으로 작성합니다.
switch (표현식) {
case 값1:
// 실행할 코드
break;
case 값2:
// 실행할 코드
break;
default:
// 실행할 코드
break;
};
코드가 다소 복잡해 보일 수 있으니 하나씩 뜯어보겠습니다. 프로그램이 switch 문을 읽을 때 거치는 과정은 다음과 같습니다.
- switch 문이 실행되면 먼저 switch 표현식이 평가됩니다.
- 평가된 값이 각 case의 값과 순서대로 비교됩니다.
- 일치하는 case를 찾으면 해당 코드 블록이 실행됩니다.
- 어떤 case와도 일치하지 않으면
default블록의 코드가 실행됩니다.
실전 예제: 커피숍 가격 조회 프로그램
실제 동작 방식을 예시로 확인해 보겠습니다. 여러분이 커피숍 사장이라고 상상해 보세요. 손님이 인기 메뉴의 가격을 쉽게 확인할 수 있도록 프로그램을 만들려 합니다. 이 예제에서는 사용자가 선택한 음료를 판매 중인 커피 목록과 대조한 뒤, 해당 음료의 가격을 출력해 줄 것입니다.
다음은 인기 음료의 가격을 조회할 수 있게 해 주는 코드입니다.
const drink_name = "Americano";
switch (drink_name) {
case "Americano":
console.log("아메리카노의 가격은 $2.60입니다.");
break;
case "Cappuccino":
console.log("카푸치노의 가격은 $2.75입니다.");
break;
case "Macchiato":
console.log("마키아토의 가격은 $3.00입니다.");
break;
case "Espresso":
console.log("에스프레소의 가격은 $2.40입니다.");
break;
default:
console.log("해당 음료는 판매하지 않습니다.");
}
변수 drink_name이 "Americano"일 때 프로그램을 실행하면 다음과 같은 결과가 반환됩니다.
아메리카노의 가격은 $2.60입니다.
drink_name을 다른 음료 이름으로 바꾸면 그 음료에 맞는 가격이 출력됩니다. 또한 목록에 없는 잘못된 음료 이름을 입력하면 default 문의 내용, 즉 "해당 음료는 판매하지 않습니다."라는 메시지가 반환됩니다.
여기서 주목할 점은 모든 case 문 끝에 break 키워드를 붙였다는 것입니다. break 문이 없으면 프로그램은 이미 일치하는 case를 찾았음에도 불구하고 계속해서 나머지 조건을 평가합니다. 이는 비효율적이기 때문에, 표현식이 일치하는 순간 프로그램이 더 이상 case를 탐색하지 않도록 break 키워드를 사용하는 것입니다.
switch 문에서 여러 케이스 묶어 사용하기
앞선 예제에서는 각 표현식마다 케이스를 하나씩 사용했고, 각각 다른 결과를 출력했습니다. 그렇다면 여러 케이스가 같은 결과를 가져야 한다면 어떻게 해야 할까요?
예를 들어 바리스타가 메뉴에 새 음료 두 가지를 추가했는데, 이 음료들이 마키아토와 가격이 같다고 가정해 봅시다. 이럴 때 새로운 case와 코드 블록을 매번 작성하는 대신, 하나의 코드 블록에 여러 개의 case를 지정할 수 있습니다.
앞선 예제를 활용해 보겠습니다. 다만 이번에는 "[음료 이름]의 가격은 [가격]입니다."라는 문구를 "이 음료의 가격은 [가격]입니다."로 바꿔 console.log() 문을 재사용할 수 있도록 하겠습니다.
또한 가격이 $3.00(마키아토와 동일)인 새 음료 두 가지, 라떼(Latte)와 모카(Mocha)를 추가합니다.
새 음료가 포함된 수정된 코드는 다음과 같습니다.
const drink_name = "Mocha";
switch (drink_name) {
case "Americano":
console.log("이 음료의 가격은 $2.60입니다.");
break;
case "Cappuccino":
console.log("이 음료의 가격은 $2.75입니다.");
break;
case "Latte":
case "Mocha":
case "Macchiato":
console.log("이 음료의 가격은 $3.00입니다.");
break;
case "Espresso":
console.log("이 음료의 가격은 $2.40입니다.");
break;
default:
console.log("해당 음료는 판매하지 않습니다.");
}
위 코드를 drink_name 변수가 "Mocha"인 상태로 실행하면 다음과 같은 결과가 반환됩니다.
이 음료의 가격은 $3.00입니다.
프로그램이 "Mocha"가 case 목록에 포함되어 있음을 확인하고, 해당 블록의 코드를 실행한 것을 볼 수 있습니다. 이처럼 case를 나란히 나열하면 break를 만나기 전까지 여러 케이스가 하나의 코드 블록을 공유하게 됩니다.
마무리
switch 조건문은 표현식을 평가하고, 그 표현식이 충족되는지에 따라 값을 반환하는 데 사용할 수 있습니다. 하나의 문장을 여러 가능한 결과와 비교해야 할 때 switch 문이 특히 유용합니다.
이번 튜토리얼에서는 자바스크립트 조건문의 기본 개념을 살펴보고, switch와 case 문을 사용하는 방법을 배웠으며, 하나의 switch 블록 안에서 여러 case 문을 활용하는 예제도 함께 다루었습니다.
이제 여러분도 전문가처럼 자바스크립트 switch case 문을 활용할 준비가 되었습니다!