본문 바로가기
클린코드 샘플(JavaScript)

if else, switch (feat. 객체 + 함수)

by 찬찬2 2022. 11. 15.

★ 규칙을 찾아내고 기능별 최소 단위로 쪼개어 분리하여 관리하는 습관이 필요하다.

 

3월 ~ 5월: 봄
6월 ~ 8월: 여름
9월 ~ 11월: 가을
12월 ~ 2월: 겨울

 

위 데이터를 바탕으로 계절을 알아내는 함수를 만들어보자

 

const getSeason = month => {
    if(month >= 3 && month <= 5) return "봄";
    if(month >= 6 && month <= 8) return "여름";
    if(month >= 9 && month <= 11) return "가을";
    if(month >= 12 || month <= 2) return "겨울";
}

console.log(getSeason(2));
console.log(getSeason(5));
console.log(getSeason(7));
console.log(getSeason(10));
console.log(getSeason(12));

 

계절은 총 1 ~ 12개의 정수의 데이터로 정확하게 구분되어 있다.그렇기 때문에 값별로 케이스를 지정할 수 있다.

 

const getSeason = month => {
    switch(){
        case 3:
        case 4:
        case 5:
            return "봄";
        case 6:
        case 7:
        case 8:
            return "여름";
        case 9:
        case 10:
        case 11:
            return "가을";
        case 12:
        case 1:
        case 2:
            return "겨울";
    }
}

 

위와 같이 단순하게 표현할 수 있겠지만 보다시피 코드가 매우 길다. 여기서 규칙성을 찾아보면, 4개의 데이터를 출력하는 케이스가 3씩 구분되어있다.

 

const getSeason = month => {
    const shiftedMonth = month - 3;
    switch(shiftedMonth){
        case 0:
        case 1:
        case 2:
            return "봄";
        case 3:
        case 4:
        case 5:
            return "여름";
        case 6:
        case 7:
        case 8:
            return "가을";
        case 9:
        case -2:
        case -1:
            return "겨울";
    }
}

 

위와 같이 shiftedMonth에 매개변수 month에서 3을 빼면 위와 같이 0 부터 순차적으로 증가되는 형태의 switch문으로 바꿀 수 있게되었다. 여기서 switch case 중 -2와 -1이 10과 11이 되면 더욱 좋을 것 같다.

 

const getSeason = month => {
    const shiftedMonth = (month - 3 + 12) % 12;
    switch(shiftedMonth){
        case 0:
        case 1:
        case 2:
            return "봄";
        case 3:
        case 4:
        case 5:
            return "여름";
        case 6:
        case 7:
        case 8:
            return "가을";
        case 9:
        case 10:
        case 11:
            return "겨울";
    }
}

 

case -2를 10으로 바꾸고 case -1을 11로 바꾸기 위해서는 12를 더하면 될 것이다. 하지만 나머지 케이스에도 12를 더하면 0 부터 1씩 증감하는 형태의 switch문이 성립되지 않는다. 나머지 연산자(%)를 이용해 해결할 수 있다.

 

이제 조금 더 명확한 규칙이 보인다. case 0 ~ 2, case 3 ~ 5, case 6 ~ 8, case 9 ~ 11은 모두 3으로 분할되어 있고 이를 3으로 나누게 되면(month / 3) 몫이...

 

0 / 3 = 0

1 / 3 = 0.3333...

2 / 3 = 0.6666...

3 / 3 = 1

4 / 3 = 1.3333...

5 / 3 = 1. 6666....

6 / 3  = 2

 

const getSeason = month => {
    const shiftedMonth = Math.floor(((month + 9) % 12) / 3);
    switch(shiftedMonth){
        case 0:
            return "봄";
        case 1:
            return "여름";
        case 2:
            return "가을";
        case 3:
            return "겨울";
    }
}

 

Math.floor을 통해 소수점을 버리고 정수로만든다.

정리하면 위와 같이 작성될 수 있다. 이제 getSeason을 데이터와 로직으로 분리하면

 

const seasonMap = {
    0: "봄",
    1: "여름",
    2: "가을",
    3: "겨울"
}

const getSeason = month => {
    const shiftedMonth = Math.floor(((month + 9) % 12) / 3);
    return seasonMap[shiftedMonth];
}

 

0 부터 1씩 순차적으로 증감하는 형태를 배열로 바꿀 수 있는 것을 알 수 있다.

 

const season = ["봄", "여름", "가을", "겨울"];

const getSeason = month => {
    const shiftedMonth = Math.floor(((month + 9) % 12) / 3);
    return season[shiftedMonth];
}

 

shiftedMonth는 season 배열의 인덱스를 결정짓는 하나의 기능을 수행하기 때문에 getSeason함수에서 따로 빼내어 사용해보자

 

const season = ["봄", "여름", "가을", "겨울"];
const getSeasonIndex = (month) => Math.floor(((month + 9) % 12) / 3);
const getSeason = (month) => season[getSeasonIndex(month)];

 

가독성이 떨어져도 switch문을 통해 규칙성을 찾고 우선 나열해보는 것이 필요하다.

댓글