[Udemy/CleanCode] 2.08 임시변수 제거하기

• 임시 변수
  • 특정 Scope 내부에서 전역변수처럼 활용되는 변수
    • 함수가 커지게 되면, 전역 공간과 다름없는 상황이 발생
    • 임시 객체도 전역 객체처럼 사용 될 수 있음
  • 임시 변수를 어떻게 CRUD 를 할까 고민해야 함

 

 

• 임시 변수의 개선1

function getElements() {
  const result = {};

  result.title = document.querySelector(".title");
  result.text = document.querySelector(".text");
  result.value = document.querySelector(".value");

  return result;
}

///////////////////////////////////////

function getElements() {
  return {
    title: document.querySelector(".title"),
    text: document.querySelector(".text"),
    value: document.querySelector(".value"),
  };
}

• 함수의 역할만 보았을때, side Effect 가 많지 않고 부작용이 적음
  • DOM 엘리먼트를 가져와서 반환만 함
  • 변수의 CRUD를 하기 애매해지게 설계됨
• 임시객체가 생기는 순간, 객체에 접근이 가능하고 CRUD 행위가 가능해짐

 

 

 

• 임시 변수의 개선2

function getDateTime(targetDate) {
  let month = targetDate.getMonth();
  let day = targetDate.getDate();
  let hour = targetDate.Hours();

  month = month >= 10 ? month : "0" + month;
  day = day >= 10 ? day : "0" + day;
  hour = hour >= 10 ? hour : "0" + hour;

  return { month, day, hour };
}

/////////////////////////////////

function getDateTime(targetDate) {
  let month = targetDate.getMonth();
  let day = targetDate.getDate();
  let hour = targetDate.Hours();

  month = month >= 10 ? month : "0" + month;
  day = day >= 10 ? day : "0" + day;
  hour = hour >= 10 ? hour : "0" + hour;

  return { month, day, hour };
}

function getDateTime() {
  const currentDateTime = getDateTime(new Date());

  return {
    month: currentDateTime.month,
    day: currentDateTime.day,
    hour: currentDateTime.hour,
  };
}

• 추가적인 스펙이 발생하였을때 문제가 발생
  • 함수의 추가
  • 함수의 수정
• CURD 를 최소화
• 하나의 함수는 명확한 하나의 역할만 수행
  • 임시변수를 사용하게 되면, 임수 변수만 조작하게 됨
  • 한줄로 추상화한 함수를 활용 가능

 

 

• 요약
  • 임시변수를 제거하자
  • 임시 변수의 사용은 명령형으로 가득한 로직이 된다.
  • 어디서 어떻게 잘못되었는지 디버깅이 힘들다.
  • 추가적인 코드를 작성하고 싶은 유혹에 빠지기 쉽다.
    • 코드의 유지보수가 어렵다
  • 임시변수사용의 해결책
    • 합수 나누기
    • 바로 반환
    • 고차함수의 사용
      • map, filter, reduce 등
    • 명령형 -> 선언형 프로그래밍 코드로 변환