Today 요약

1. 자바스크립트 강의

1. What I Learned?

1.1 자바스크립트 강의

if else 리팩토링

정재남님의 강의를 보고 복습한 내용이다.

비슷하게 반복되는 If else문은 switch case 문으로 변경할 수 있고, switch case문에서 규칙성이 발견된다면,

이 또한 객체로 변경해서 리팩토링 할 수 있다. 객체에서도 키가 0부터 시작하는 걸로 변경할 수 있다면 배열로 까지 변경해서 리팩토링 할 수 있다.

const getWeather = (temperature) => {
  if (temperature < 0) return '몹시 추워요'
  if (temperature < 10) return '추워요'
  if (temperature < 20) return '선선해요'
  if (temperature < 30) return '조금 더워요'
  if (temperature < 40) return '더워요'
  return '몹시 더워요'
}

위와 같은 반복되는 if문을 switch case문으로 바꾼다.

const getWeather = (temperature) => {
  const shiftedTemperature = Math.floor(temperature / 10)
  switch (shiftedTemperature) {
    case 0:
      return '추워요'
    case 1:
      return '선선해요'
    case 2:
      return '조금 더워요'
    case 3:
      return '더워요'
    default: {
      if (shiftedTemperature < 0) return '몹시 추워요'
      return '몹시 더워요'
    }
  }
}

바꿀때 Math.floor(temperature / 10)로 규칙성을 확보한다. 그럼 switch case문에서 일정한 패턴이 보인다.

이 일정한 패턴을 확인해서 객체나 배열로 변경할 수 있게끔 좀 더 다듬어본다.

const getTemperature = (temperature) =>
  Math.min(Math.max(Math.ceil(temperature / 10), 0), 5)

이렇게 뽑아내고, case를 모두 0 ~ 5로 표현이 가능하게 만들면, 배열에 담을 수 있다.

const Temperatures = [
  '몹시 추워요',
  '추워요',
  '선선해요',
  '조금 더워요',
  '더워요',
  '몹시 더워요'
]

const getTemperature = (temperature) =>
  Math.min(Math.max(Math.ceil(temperature / 10), 0), 5)
const getWeather = (temperature) => Temperatures[getTemperature(temperature)]

관심사도 정확하게 분리되어 있고, 좀 더 명확하게 이해할 수 있는 코드가 되었다.