예제가 포함된 JavaScript Switch 문 안내

자바스크립트의 `switch`문은 조건부 흐름 제어를 위한 구문으로, 여러 분기점을 가진 코드 블록을 생성할 때 매우 유용합니다.

이 글에서는 `switch`문의 사용법을 자세히 알아보고, 다른 조건문인 `if`문 및 삼항 연산자와 비교하여 각 구문이 어떤 상황에 적합한지 설명합니다.

자바스크립트 `switch`문이란 무엇인가?

자바스크립트 `switch`문은 주어진 표현식의 값을 기반으로 실행할 코드 경로를 결정하는 데 사용되는 조건문입니다. 이는 자바스크립트에서 제공하는 여러 조건문 중 하나입니다.

다른 조건문으로는 `if`문과 삼항 연산자가 있으며, 이들은 `switch`문과 유사한 기능을 제공하지만 사용 시나리오에 따라 각기 다른 장점을 가집니다. 이 글에서는 이러한 차이점을 자세히 살펴보겠습니다.

자바스크립트 `switch`문 사용 방법

이 섹션에서는 자바스크립트 `switch`문의 구문과 실제 사용 방법을 예제 코드와 함께 상세히 설명합니다. 예제 코드를 실행해 보려면 자바스크립트 컴파일러가 필요하며, 편리하게 사용할 수 있는 온라인 자바스크립트 컴파일러는 여기에서 찾을 수 있습니다. 또는, 최고의 온라인 자바스크립트 IDE에 대한 관련 글을 참고하는 것도 좋습니다.

일반적인 구문

`switch`문의 일반적인 구문은 다음과 같습니다.

switch(<표현식>) {
    case <값 1>:
        <명령문들>
        break;
    case <값 2>:
        <명령문들>
        break;
    default:
        <명령문들>
}

`switch` 키워드는 자바스크립트 `switch` 블록의 시작을 나타냅니다. 괄호 안에는 자바스크립트 표현식이 들어가며, 이 표현식은 값으로 평가될 수 있는 모든 것, 예를 들어 문자열, 숫자, 변수, 함수 호출 등이 될 수 있습니다.

다음으로, 중괄호 안에 `switch`문의 본문을 작성합니다. 본문은 여러 개의 `case`로 구성되어 있으며, 각 `case`는 값과 실행될 명령문 그룹을 포함합니다. `switch`문의 괄호 안의 표현식의 값이 특정 `case`의 값과 일치하면 해당 `case`의 명령문이 실행됩니다.

각 `case`에는 `break` 키워드를 추가할 수 있습니다. 이는 선택 사항이지만, `break` 키워드를 추가하면 자바스크립트는 해당 `case`의 실행이 끝나면 `switch` 블록에서 빠져나옵니다. `break`가 없다면 자바스크립트는 다음 `case`들을 계속해서 실행하게 되는데, 이를 'fall-through'라고 합니다. 의도하지 않은 fall-through를 방지하려면 `break` 키워드를 사용하는 것이 좋습니다.

마지막으로, `default` 키워드는 `switch`문의 괄호 안의 표현식 값이 어떤 `case`의 값과도 일치하지 않을 때 실행될 명령문을 지정합니다.

예시

이제 `switch`문을 사용하는 다양한 예시를 살펴보겠습니다.

#1. Fall-through를 포함하는 경우

다음은 `break` 키워드를 사용하지 않고 `switch`문을 사용하는 예시입니다. 이는 'fall-through'를 보여주기 위한 목적입니다.

이 예시에서는 다양한 HTTP 상태 코드를 처리하는 코드를 작성합니다.

const statusCode = <상태 코드 입력>

switch (statusCode) {
    case 200:
        console.log('OK');
    case 301:
        console.log('Redirect');
    case 403:
        console.log('Forbidden');
    case 404:
        console.log('Not Found');
    case 500:
        console.log('Internal Server Error')
}

위 코드에서, `statusCode`의 값이 특정 상태 코드와 일치하는지 확인한 다음 해당 상태 코드에 대한 메시지를 출력합니다.

`statusCode`를 403으로 설정했을 때 어떤 결과가 발생하는지 살펴봅시다.

403 케이스가 매칭된 후, 이후의 모든 케이스들이 연달아 실행되었습니다. 이것이 바로 'fall-through'입니다. 일반적으로 하나의 케이스만 실행되기를 원하므로, 이는 바람직하지 않습니다. 이러한 특성 때문에 각 케이스마다 `break` 키워드를 추가해야 합니다.

#2. Fall-through 없이

오류를 방지하기 위해 각 `case` 끝에 `break` 키워드를 추가합니다. 다음 예는 이 경우 어떤 일이 일어나는지 보여줍니다.

const statusCode = <상태 코드 입력>

switch (statusCode) {
    case 200:
        console.log('OK');
        break;
    case 301:
        console.log('Redirect');
        break;
    case 403:
        console.log('Forbidden');
        break;
    case 404:
        console.log('Not Found');
        break;
    case 500:
        console.log('Internal Server Error')
        break;
}

상태 코드 403으로 위 코드를 실행하면 다음 결과가 나타납니다.

보시다시피, 이제 코드는 단 하나의 `case`만 실행하며 오류를 방지합니다.

#3. 유용한 Fall-through

Fall-through가 특정 상황에서 유용할 수 있다는 점을 기억해야 합니다. 예를 들어, 입력된 방향에 따라 수평 이동인지 수직 이동인지 확인하는 경우를 생각해 봅시다.

const direction = '<방향 입력>'

switch(direction) {
    case 'left':
    case 'right':
        console.log('수평 이동');
        break;
    case 'up':
    case 'down':
        console.log('수직 이동');
        break;
}

방향을 'left'로 설정하고 위 코드를 실행하면 다음 결과가 나옵니다.

방향을 'right'로 설정해도 동일한 결과를 얻습니다.

'left' 케이스가 매칭되면 'right' 케이스로 이어져서 '수평 이동'을 출력합니다. 하지만 `break` 키워드 때문에 'up' 케이스로 이어지지는 않습니다. 따라서 올바른 케이스가 매칭되면 해당 케이스의 명령문이 실행된 후 `switch` 블록에서 빠져나옵니다.

결과적으로, 방향이 'left' 또는 'right'일 때 '수평 이동'이 출력됩니다. 따라서 fall-through를 사용하여 코드에 OR 논리를 구현할 수 있습니다.

#4. 범위 매칭

자바스크립트 `switch`문은 `case` 값과 표현식 값이 같은지 확인합니다. 같다면 해당 `case`의 명령문을 실행합니다. 하지만 때로는 값이 특정 범위 안에 있는지 확인하고 싶을 수 있습니다. 범위를 매칭하는 것은 까다로울 수 있지만, 아래 예시 코드가 해결 방법을 보여줍니다.

다음 예시에서는 점수에 따라 등급을 출력하는 프로그램을 구현합니다. 예를 들어, 점수가 90점 이상이면 A+를 출력하고, 80점 이상 90점 미만이면 A를 출력합니다.

이를 위해 `switch`문의 괄호 안에 `true`라는 표현식을 넣었습니다. 그런 다음 각 `case`의 값은 점수가 해당 범위에 속하는 경우에만 참이 되는 논리 연산으로 정의했습니다. 예를 들어, 마지막 케이스 `mark >= 90`은 점수가 90 이상일 때만 참이 됩니다. 따라서 `true`는 `true`와 같으므로 표현식의 값과 일치합니다.

const mark = <점수로 대체>;

switch (true) {
    case mark >= 50 && mark < 60:
        console.log('D');
        break;
    case mark >= 60 && mark < 70:
        console.log('C');
        break;
    case mark >= 70 && mark < 80:
        console.log('B');
        break;
    case mark >= 80 && mark < 90:
        console.log('A')
        break;
    case mark >= 90:
        console.log('A+')
        break;
    default:
        console.log('<50')
}

점수가 80으로 설정된 경우 위 코드의 출력은 다음과 같습니다.

점수가 95로 설정된 경우:

점수가 45일 때:

어휘 범위 지정

`switch`문 내부의 `case` 내부에 정의된 변수는 어휘 범위를 따르지 않습니다. 즉, 한 `case`에서 정의된 변수가 다른 `case`에서도 접근 가능하다는 의미입니다. 둘 이상의 `case`가 매칭될 수 있는 `switch` 블록을 작성할 때 이 점을 알아두는 것이 중요합니다. 다음 예시에서 더 자세히 살펴보겠습니다.

switch (true) {
    case true:
        let num = 10
    case true:
        console.log(num);
}

위 코드에서 두 `case` 모두 `true`이므로 매칭됩니다. 첫 번째 `case`에서 `num` 변수를 정의하고 두 번째 `case`에서 그 값에 접근합니다. 아래 스크린샷에서 볼 수 있듯이 오류는 발생하지 않습니다.

`switch`문과 다른 조건문의 차이점

`switch`문은 여러 개의 조건을 테스트하는 시나리오에 적합하며, `if`문은 두세 개의 조건을 테스트하는 경우에 더 적합합니다. 삼항 연산자는 조건문을 한 줄로 표현하고 싶을 때만 사용해야 합니다.

간결성을 위해 먼저 삼항 연산자를 사용하는 것이 좋습니다. 삼항 연산자로 복잡한 논리를 표현하기 어렵다면 `if`문을 사용하고, 이마저도 어렵다면 `switch`문을 사용하는 것이 좋습니다.

결론

이 글에서는 `switch`문의 사용법, 작동 방식, 특이한 점들을 자세히 살펴보았습니다. 또한 언제 `switch`문을 사용해야 하는지도 다루었습니다.

다음으로 자바스크립트 치트 시트를 사용하여 자바스크립트 실력을 향상시키는 것도 좋은 방법입니다.