[JavaScript] If문이 더러울땐 Switch

처음 코딩을 시작할 때 아마 if문을 가장 많이 사용할 것이다. 하지만 if문만 주구장창 쓰다보면 가독성도 떨어지고 디버깅도 어려워진다. 특히 중첩 if문을 계속 쓰면 Nesting이 많아져 코드가 정말 더러워진다.

 

Nesting이 뭐냐면..

 

이거임

 

 

그래서 더러운 if 문 대신 코드를 훨씬 더깔끔하게 만들어주는 문법이 하나있다.

바로 switch 문법이다.

 

 

switch 문법 기본

switch 문법은 주어진 표현식의 값을 평가하여 여러 case 중 하나에 해당하는 코드를 실행하는 문법이다.

다음은 기본적인 문법 구조다.

switch (표현식) {
    case 값1:
        // 값1에 해당하는 경우 실행될 코드
        break;
    case 값2:
        // 값2에 해당하는 경우 실행될 코드
        break;
    default:
        // 어떤 case에도 해당하지 않는 경우 실행될 코드
}

 

 

간단한 예제로 요일에 따른 메시지를 출력하는 코드를 작성해보았다.

let day = new Date().getDay(); // 현재 요일을 숫자로 가져옴 (0: 일요일, 1: 월요일, ...)

switch (day) {
    case 0:
        console.log("오늘은 일요일입니다.");
        break;
    case 1:
        console.log("오늘은 월요일입니다.");
        break;
    case 2:
        console.log("오늘은 화요일입니다.");
        break;
    case 3:
        console.log("오늘은 수요일입니다.");
        break;
    case 4:
        console.log("오늘은 목요일입니다.");
        break;
    case 5:
        console.log("오늘은 금요일입니다.");
        break;
    case 6:
        console.log("오늘은 토요일입니다.");
        break;
    default:
        console.log("알 수 없는 요일입니다.");
}

 

 

중첩 if문 쓰다보면 종종 아래처럼  nesting이 많아지는 더러운 코드가 나온다

let day = new Date().getDay(); // 현재 요일을 숫자로 가져옴 (0: 일요일, 1: 월요일, ...)

if (day === 0) {
    console.log("오늘은 일요일입니다.");
} else {
    if (day === 1) {
        console.log("오늘은 월요일입니다.");
    } else {
        if (day === 2) {
            console.log("오늘은 화요일입니다.");
        } else {
            if (day === 3) {
                console.log("오늘은 수요일입니다.");
            } else {
                if (day === 4) {
                    console.log("오늘은 목요일입니다.");
                } else {
                    if (day === 5) {
                        console.log("오늘은 금요일입니다.");
                    } else {
                        if (day === 6) {
                            console.log("오늘은 토요일입니다.");
                        } else {
                            console.log("알 수 없는 요일입니다.");
                        }
                    }
                }
            }
        }
    }
}

 

 

 

switch 제어문

case:

앞에서 본 예제처럼 switch는 표현식을 case에 따라 평가한다. 실행 코드가 같은 case문은 한데 묶어서 나열할 수 있다.

예를들어

switch (fruit) {
    case '사과':
    case '배':
        console.log("이 과일은 달콤해요."); // 사과 or 배 일때 실행.
        break;
    case '레몬':
        console.log("이 과일은 신맛이 나요.");
        break;
    default:
        console.log("모르는 과일이에요.");
}

 

 

break :

break문은 각 case 블록의 끝에 위치해 있다. 신기하게도 switch문은 각 case 블럭에 break를 안 붙이면

참인 case 밑에 있는 애들도 case 조건에 상관없이 다 실행해줘버린다. 그래서 무조건 case 끝에는 break 붙여줘야한다. 꽤 귀찮다. 종종 이거 안붙여서 에러뜬다.

 

default :

약간 try문 같은 에러 처리 제어문이다. 모든 case에 해당하지 않을때 실행되는 블록으로 break마냥 필수는 아니지만 코드 안정성을 생각하면 쓰는게 좋다고한다.

 

 

switch문의 표현식은 상수, 변수, 문자열 값, 함수 호출 등 다양할 수 있다.

아래는 switch문이 문자열 처리하는 코드.

javascript코드 복사
let color = "blue";

switch (color) {
    case "red":
        console.log("색깔은 빨간색입니다.");
        break;
    case "blue":
        console.log("색깔은 파란색입니다.");
        break;
    default:
        console.log("알 수 없는 색깔입니다.");
}

 

아래는 boolean 표현식 평가하는 코드.

javascript코드 복사
let x = 5;

switch (true) {
    case (x < 10):
        console.log("x는 10보다 작습니다.");
        break;
    case (x === 10):
        console.log("x는 10입니다.");
        break;
    default:
        console.log("x는 10보다 큽니다.");
}

 

switch의 장점은 아주 많다. 가독성 향상, 코드 간결과, 유지보수 용이, 성능 개선 등등..

 

하지만 단점도 있는데 switch문은 표현식이 단일 값일 때만 사용하기 때문에 if문 마냥 아무데나 쓰고 댕길 수가 없다. 조건의 범위가 조금만 넓어져도 사용하기 힘든 점도 있다.

 

결론

switch문 쓰면 조건비교가 복잡한 몇몇 경우에는 보다 간결하게 처리할 수 있다. 코드 가독성도 높여주고 관리하기도 쉽게 만들어준다. 하지만 코드 정리 할때는 다른 개발자들도 같이 봐야하니 상황봐가면서 적절히 사용해야 할 것 같다. 특히 코린이들은 '코드관리'보다 '기능구현'이 우선이므로 코드양이 길어지면 그때 자연스럽게 이런 리팩토리 기법을 사용하는 것이 낫다.