자바스크립트에서 switch case 문 활용하기: 예제와 함께 알아보기

1. switch case 문이란?

 

 

 

[1. switch case 문이란?]

 

switch case 문은 조건에 따라 다른 동작을 수행할 때 사용하는 조건문입니다. if-else 문과 유사한 역할을 하지만, 여러 조건을 한 번에 처리해야 할 때 if-else 문보다 간결하고 가독성이 좋습니다.

 

switch 문은 표현식(expression)과 case 라벨을 사용합니다. 표현식에 따라 각각의 case 라벨을 비교하고 일치하는 경우 해당 case 문 아래의 코드 블록을 실행합니다. 만약 일치하는 case 라벨이 없다면, default 문 아래의 코드 블록이 실행됩니다.

 

switch 문의 기본적인 구조는 다음과 같습니다.

 

```

 

switch(expression) {

 

case label1:

 

// code block 1

 

break;

 

case label2:

 

// code block 2

 

break;

 

...

 

default:

 

// default code block

 

}

 

```

 

위의 코드에서, expression은 비교할 값이고, label1, label2 등은 해당 값과 비교할 case 라벨입니다. code block 1, code block 2 등은 해당 case 라벨과 일치할 때 실행될 코드 블록입니다. default는 모든 case 라벨과 일치하지 않을 때 실행될 코드 블록입니다. 각각의 코드 블록은 break 문으로 끝나야 합니다. break 문이 없으면, 해당 case 블록 이후의 모든 코드 블록이 실행됩니다.

 

아래 예제를 통해 switch case 문의 사용법을 이해해보세요.

 

```

 

let animal = "dog";

 

switch (animal) {

 

case "dog":

 

console.log("멍멍!");

 

break;

 

case "cat":

 

console.log("야옹~");

 

break;

 

default:

 

console.log("모르는 동물입니다.");

 

}

 

```

 

위의 코드는 animal 변수의 값이 "dog"일 경우 "멍멍!"을 출력하고, "cat"일 경우 "야옹~"을 출력합니다. 만약 animal 변수의 값이 "dog" 또는 "cat"이 아니라면, "모르는 동물입니다."를 출력합니다.

 

switch case 문은 다양한 상황에서 활용될 수 있으며, 유연한 조건문으로서 자바스크립트 코드 작성에 자주 사용됩니다.

 

 

 

2. switch case 문의 문법

 

 

 

switch case 문은 다음과 같은 형태로 구성됩니다.

 

```javascript

 

switch(expression) {

 

case value1:

 

// 실행될 코드

 

break;

 

case value2:

 

// 실행될 코드

 

break;

 

case value3:

 

// 실행될 코드

 

break;

 

//...

 

default:

 

// 기본적으로 실행될 코드

 

break;

 

}

 

```

 

switch 뒤의 괄호 안에는 변수나 변수와 연산자 등이 들어갈 수 있습니다. expression에 해당하는 값이 각각의 case 값과 일치하면 해당 case에 있는 코드 블록이 실행됩니다.

 

매칭되는 case가 없는 경우 default 블록이 실행됩니다. default 블록은 선택적으로 포함할 수 있으며, 이는 if 문에서 else와 유사합니다.

 

각 case 블록은 break 키워드로 끝나야 합니다. 이를 통해 switch case 문이 끝나며, 다음 case문을 실행하지 않도록 합니다. 만약 break를 작성하지 않았을 경우, 다음 case문도 연이어 실행됩니다.

 

또한, 각 case 마다 하나의 값을 비교할 수 있습니다. 따라서, 문자열이나 숫자, 논리값 등 다양한 타입의 값을 비교할 수 있습니다.

 

 

 

3. switch case 문 활용 예제 1: 요일 출력하기

 

 

 

```javascript

 

let dayOfWeek = 3;

 

let day = "";

 

switch (dayOfWeek) {

 

case 1:

 

day = "월요일";

 

break;

 

case 2:

 

day = "화요일";

 

break;

 

case 3:

 

day = "수요일";

 

break;

 

case 4:

 

day = "목요일";

 

break;

 

case 5:

 

day = "금요일";

 

break;

 

case 6:

 

day = "토요일";

 

break;

 

case 7:

 

day = "일요일";

 

break;

 

default:

 

day = "잘못된 입력입니다. 1에서 7까지의 숫자를 입력하세요.";

 

}

 

console.log(day);

 

```

 

위 코드는 1에서 7까지의 숫자 값에 따라 해당하는 요일을 출력하는 예제입니다. dayOfWeek 변수에는 출력하고자 하는 요일의 숫자 값을 할당합니다. switch 문을 사용하여 case 1부터 7까지 차례로 해당하는 요일을 문자열로 할당하고, break 구문을 사용하여 case 문을 빠져나와야 합니다. 만약 입력한 값이 1에서 7까지의 숫자가 아니라면 default 문에 해당하는 코드블록이 실행됩니다. 이때는 "잘못된 입력입니다. 1에서 7까지의 숫자를 입력하세요."라는 문자열이 day 변수에 할당됩니다. 마지막으로 console.log() 함수를 사용하여 day 변수를 출력하면 입력된 요일의 문자열이 출력됩니다.

 

 

 

4. switch case 문 활용 예제 2: 계절 출력하기

 

 

 

예제: 현재 월(month)을 입력하면 해당하는 계절(season)을 출력하는 프로그램을 작성해보자.

 

```javascript

 

let month = 10;

 

let season;

 

switch (month) {

 

case 12:

 

case 1:

 

case 2:

 

season = "겨울";

 

break;

 

case 3:

 

case 4:

 

case 5:

 

season = "봄";

 

break;

 

case 6:

 

case 7:

 

case 8:

 

season = "여름";

 

break;

 

case 9:

 

case 10:

 

case 11:

 

season = "가을";

 

break;

 

default:

 

season = "올바른 월을 입력해주세요";

 

}

 

console.log(season); // 출력 결과: 가을

 

```

 

위 코드에서는 월(month)별로 해당하는 계절(season)을 구하는 예제이다. switch 문을 사용하여 입력된 월에 따라 해당하는 계절을 구하고, 결과값을 변수 season에 할당하였다. case 문에서는 월(month)의 값에 따라 다른 결과값을 반환하도록 작성하였으며, default 문에서는 잘못된 값이 입력됐을 경우의 예외 처리를 하였다.

 

위 코드를 실행하면 현재 월이 10월로 설정되어 있으므로, 가을이라는 결과값이 출력된다. 만약 month 변수의 값을 13으로 변경하면 default 문에 해당하는 "올바른 월을 입력해주세요"라는 메시지가 출력된다. 이번 예제를 통해 switch case 문이 조건 분기에 유용하게 활용될 수 있다는 것을 알 수 있다.

 

 

 

5. switch case 문 활용 예제 3: 학점 계산하기

 

 

 

학생의 성적에 따라 학점을 계산하는 프로그램을 작성해보자. 성적은 0점부터 100점까지의 범위를 갖으며, 학점은 다음과 같이 나누어진다.

 

- 90점 이상: A+

 

- 85점 이상: A

 

- 80점 이상: A-

 

- 75점 이상: B+

 

- 70점 이상: B

 

- 65점 이상: C+

 

- 60점 이상: C

 

- 50점 이상: D

 

- 50점 미만: F

 

우선 성적을 입력받아 변수에 저장한다. 그리고 switch case 문을 활용하여 해당하는 학점을 계산한다.

 

```javascript

 

let score = prompt("성적을 입력하세요.");

 

let grade = "";

 

switch (Math.floor(score / 10)) {

 

case 10:

 

case 9:

 

grade = "A+";

 

break;

 

case 8:

 

grade = "A";

 

break;

 

case 7:

 

grade = "B+";

 

break;

 

case 6:

 

grade = "C";

 

break;

 

case 5:

 

case 4:

 

case 3:

 

case 2:

 

case 1:

 

case 0:

 

grade = "F";

 

break;

 

default:

 

grade = "잘못된 입력입니다.";

 

}

 

console.log(`당신의 학점은 ${grade}입니다.`);

 

```

 

우선 성적을 입력받고, 입력받은 성적을 10으로 나누어 몫을 구한다. 이렇게 함으로써, 성적이 90점 이상인 경우에는 9 혹은 10이 나오며, 85점 이상인 경우에는 8이 나올 것이다.

 

그리고 switch case 문을 활용하여, 몫이 나오는 경우마다 해당하는 학점을 변수에 저장한다.

 

마지막으로, 콘솔에 결과를 출력한다.

 

 

 

6. switch case 문을 사용할 때 유의할 점

 

 

 

- 반드시 break 문을 사용해야 한다: switch case 문에서는 각 case 에서 처리한 후 반드시 break 문으로 switch 문을 탈출해야 한다. break 문을 사용하지 않으면 다음 case 문도 실행된다.

 

- default 문은 선택사항: switch case 문에서 default 문은 선택사항이다. 하지만 default 문을 사용하는 것이 좋다. 어떤 상황에서도 일치하는 case 문이 없을 때 default 문이 실행되어 예외 상황을 처리할 수 있다.

 

- case 에는 변수가 들어갈 수 없다: switch case 문에서는 변수를 직접 입력할 수 없다. 변수를 사용하려면 if 문을 사용해야 한다.

 

- switch case 문의 비교는 정확하게 일치해야 한다: switch case 문에서 비교하는 값과 case 문의 값은 반드시 정확하게 일치해야 한다. 자바스크립트에서는 이를 Strict Equality Comparison(===) 이라고 부른다.

 

- 연속된 case 문 처리: 여러 개의 case 문에서 같은 코드를 처리하고 싶을 때는 case 문을 연속해서 사용하면 된다. 이 경우 break 문을 사용하지 않으면 모든 case 문을 실행하게 된다.

 

예시:

 

```

 

let fruit = "banana";

 

switch (fruit) {

 

case "apple":

 

case "banana":

 

case "orange":

 

console.log("과일이 맞습니다.");

 

break;

 

default:

 

console.log("과일이 아닙니다.");

 

}

 

```

 

위 코드에서 fruit 변수의 값이 "apple", "banana", "orange" 중 하나라면 "과일이 맞습니다."가 출력된다. case 문에서 각 값이 비교되고, 연속된 case 문으로 하나의 처리가 이루어져 있다. 만약 fruit 값이 이들과 다른 값을 가진다면 default 문이 실행되어 "과일이 아닙니다."가 출력된다.