[클린코드 JS] 수강 2일차

# 클린코드 JS

(이 글은 유데미아케데미에 있는 poco님의 '클린코드 자바스크립트' 강의를 수강하고 느낀점을 기록한 글임을 밝힙니다!)

 

## 임시 변수를 제거하자

 - 임시 변수를 왜 제거해야할까?

 - 제거하기 위한 해결책

 

---

 

## 임시 변수를 제거하자

 

 임시 변수를 왜 제거해야할까?

 

function solution(args) {
  let answer = 0;
  
  .
  .
  .
  
  return answer;
}

 

 다음과 같은 코드가 있다고 생각해보자. 이때 solution이라는 함수의 크기가 커지면 answer도 하나의 전역변수 처럼 되어버릴 수 있다. 이렇다면 코드가 작성된 뒤에 벌어질 상황은 오랜시간이 지난뒤에 내가 코드를 수정하기위해 다시 보았을때 혹은 같은 협업자가 코드를 보게되었을때 혼란이 오기 쉬워진다는 것이다.

 

또다른 2가지 예시를 살펴보자.

 

function getDateTime(targetDate) {
  let month = targetDate.getMonth();
  let day = targetDate.getDay();
  let hour = targetDate.getHour();
  
  month = ...;
  day = ...;
  hour = ...;
  
  return {
    month, day, hour
  };
}

function getSomeValue(params) {
  let temp = '';

  for (let idx = 0; idx < arr.length; idx++) {
    temp = arr[idx];
    temp += arr[idx];
    temp += arr[idx];
    temp += arr[idx];
    
  }
  
  if (temp ??) {
    tempVal = ??
  } else if (temp ??) {
    temp += ??
  }
  
  return temp;
}

 

위의 코드 순서대로 날짜와 시간을 반환하는 코드, 반복문을 통한 temp 값 연산 및 반환코드이다. 여기서 우리가 고민해 볼것은

  1. let을 통해 재할당하거나 수정할 수 있다는 여지를 둔 것.

  2. 두번째 코드에서의 명령형으로 가득한 로직.

  3. 이러한 코드가 길어졌을때 어디서 어떻게 잘못되었는지 디버깅이 어려워짐.

 

이정도?

 

 

  제거하기 위한 해결책

 

우선 위의 예시코드를 클린하게 수정한 코드를 살펴보자

function getDateTime(targetDate) {
  const month = targetDate.getMonth();
  const day = targetDate.getDay();
  const hour = targetDate.getHour();

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

 

상당히 깔끔하게 정리된 모습이다.

 

 강의속에서 제시하는 해결책은 총 4가지가 제시되었다.

01. 함수 나누기

02. 바로 반환하기(return)

03. 고차함수 활용하기(map(), filter(), reduce() 등)

04. 명령형 코드가 아닌 선언형 코드 작성

 

 

 두번째 예시코드에 대한 수정 코드는 작성하지 못했지만 고차함수 활용과 바로 반환하기와 같은 해결책으로 보다 깔끔한 코드가 작성 될 수 있지않을까 생각된다.

 

 

 사실 처음에는 별거 아닌줄알았지만 강의 내용을 어느정도 이해하는데 너무많은 시간을 쓴것같다. 그렇다고 전부 이해한것도 아닌... 좋은건지 나쁜건지... 음...