[JS] 임시변수를 줄여야 하는 이유 (클린 코드)

(클린 코드 강의를 듣고 정리한 글입니다.)

 

📗 임시변수란 무엇인가요? 

• Scope안에서 전역변수처럼 활용되는 것

 

📗 임시변수를 왜 줄여야 하나요? 

• 임시객체를 const로 사용한다고 하더라도 함수가 커지면 전역공간이나 다름없는 나올 수 있습니다.
• 문제를 줄이기 위해 함수를 잘게 나누어야 하는데 임시변수 안에서 계속 로직을 작성하게 된다면 명확하지 못한 코드가 될 수 있습니다.
• 임시변수를 쓰게 되면 명령형으로 가득한 로직이 나옵니다.
• 어디서 어떻게 잘못됐는지 디버깅이 어렵습니다.
• 추가적인 코드를 작성하고 싶은 유혹에 빠지기 쉽습니다.
• 코드 유지보수가 어렵습니다.

 

밑에서 예시와 예시를 수정한 코드를 살펴보고 해결책을 살펴보도록 하겠습니다.

---

(예시 코드는 그저 예시를 위한 코드로 동작을 예상하는 코드는 아닙니다.)

 

안좋은 예시 1.

하나의 기능만 수행하지 않고 연산, 조건문 등 많은 기능이 들어가 있어 return되는 temp의 값이 무엇인지 명확하게 알 수 없게 됩니다. 그리고 다른 팀원이 또는 미래의 내가 쉽게 수정 가능한 코드로 보입니다. 

 

안좋은 예시 2. 

function getElements() {
  const result = {};

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

  return result;
}

돔 엘리먼트를 객체로 가져오는 코드입니다.

임시 객체 result를 만들고 dot 연산자를 사용해서 넣고 있습니다. 

이 함수는 생명주기가 간단해서 result라는 객체에 넣고 result를 return하면 끝나게 됩니다. 그렇다면 밑과 같이 바꿀 수 있게 됩니다.

function getElements() {
  const result = {
    title: document.querySelector('.title'),
    text: document.querySelector('.text'),
    value: document.querySelector('.value'),
  }

  return result;
}

코드를 위와 같이 바꾸면서 더 명확하게 만들 수 있습니다.

 

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

임시 객체인 result를 쓰지 않고 바로 객체로 return을 해버리는 방법도 있습니다. 이 코드는 누가 보아도 사이드 이펙트가 많지 않은 코드로 보일 겁니다. 

 

안좋은 예시 3.

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
  };
}

이러한 함수를 만들었을 때 만약 추가적인 스펙, 날짜에 대한 요구사항이 생겼을 때 어떻게 대처해야 할까요?

1. 함수를 추가로 만들기

2. 위 함수를 수정하고 유지보수 하기

 

2번 방법을 선택했을 때 저 함수를 이미 100곳이 넘는 곳에서 쓰고 있다면 어떻게 될까요? 함수를 수정하고 꼼꼼하게 확인하지 못한 경우에 많은 일이 일어날 수 있습니다.

 

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

  return {
    month: month >= 10 ? month : '0' + month;
    day: day >= 10 ? day : '0' + day;
    hour: hour >= 10 ? hour : '0' + hour;
  };
}

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

  return [
    month: currentDateTime.month + '분 전';
    day: currentDateTime.month + '분 전';
    hour: currentDateTime.month + '분 전';
  ]
}

먼저 let으로 선언한 부분을 const로 바꾸고 바로 return 해줍니다. 그리고 수정사항이 생겼을 때 함수를 재사용합니다.

 

즉 함수는 하나의 명확한 역할만 하게 만드는 것이 좋습니다. 

임시 변수라는 유혹에 빠지게 되면 임시 변수 안에서 계속 조작하게 됩니다.

 

📗 임시변수를 해결하기 위한 방법

• 함수에 명확한 하나의 기능이 담기도록 함수를 나눠줍니다.
• 임시 객체를 쓰지 않고 바로 리턴하는 것도 방법이 됩니다.
• 고차 함수를 사용합니다. (map(), filter(), reduce())
• 명령형으로 작성하지 않고 선언형으로 바꾸려고 스스로 노력해야 합니다.

 

---

https://www.udemy.com/course/clean-code-js/

클린코드 자바스크립트