6-3. 변수 추출하기

적용 시점

• 표현식이 너무 복잡해서 부분으로 쪼개 관리하기 쉽게 만들고 싶을 때

• 표현식에 이름을 붙이고 싶을때

• 변수가 현재 함수 안에서만 의미가 있을 때

절차

1. 추출하려는 표현식에 부작용은 없는지 확인

2. 불변 변수를 하나 선언하고 이름을 붙일 표현식의 복제본을 대입

3. 원본 표현식을 새로 만든 변수로 교체

4. 테스트

5. 표현식을 여러곳에서 사용한다면 새로 만든 변수로 교체

예시

❌ Before

const getTotalPercent = (value) => `hour: ${value / 24}, minute: ${value / (24 * 60)}, second: ${value / (24 * 60 * 60)}`

⭕ After

const getTotalPercent = (value) => {
  const hour = value / 24;
  const minute = hour / 60;
  const second = minute / 60;
  return `hour: ${hour}, minute: ${minute}, second: ${second}`;
}