★ 규칙을 찾아내고 기능별 최소 단위로 쪼개어 분리하여 관리하는 습관이 필요하다.
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문을 통해 규칙성을 찾고 우선 나열해보는 것이 필요하다.
'클린코드 샘플(JavaScript)' 카테고리의 다른 글
[2] 클린코드 Rule (0) | 2022.11.17 |
---|---|
[1] 클린코드 Rule (0) | 2022.11.17 |
Redux - reducer(switch문) 리팩토링 (0) | 2022.11.15 |
함수형 프로그래밍, 상속 (커링, Currying) (0) | 2022.11.01 |
if else - 맵핑관계 분석 후 정의(데이터를 객체화, 로직을 분리) (0) | 2022.11.01 |
댓글