(생활코딩) Javascript 리팩토링 중복의 제거

이번에는 리팩토링이라는 것에 대해 살펴보자.

리팩토링(Refactoring)이라고 하는 것은 공장으로 다시 보내서 좀더 개선한다는 느낌이다.

 

코딩을 하고나면 코드가 좀 비효율적인 면들이 생기기 마련이다. 동작하는 것은 그대로 두고 코드 자체를 아주 효율적으로 만들어서 그 코드의 가독성을 높이고 유지보수를 하기 편리하게 만들고 중복된 코드를 낮추고 이러한 방향으로 코드를 다시 개선하는 작업을 리팩토링이라고 하고, 소프트웨어가 커지고 복잡해지면서 틈틈이 리팩토링을 해야 좋은 프로그램을 만들 수 있다.

 

전에 만들었던 조건문 코드에서 비효율적인 것들을 좀 제거하는 리팩토링의 사례를 한번 봐보자.

 

toggle되는 버튼의 코드를 살펴보자.

 

<input id="night_day" type="button" value="night"onclick="
  if(document.querySelector('#night_day').value === 'night'){
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';
    document.querySelector('#night_day').value='day';
    }
  else{
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';
    document.querySelector('#night_day').value='night';
  }">

 

이 버튼을 여러 개 만들고 싶어서 코드를 똑같이 복사했을 때 이 기능이 제대로 실행되지 않는다. 바로 id값이 중복되기 때문이다. 그래서 id 값을 개별로 다 수정한다고 했을 때, 그리고 이러한 버튼을 한 개가 아닌 여러 개를 만들어야 하면 수정을 여러번 해야하기 때문에 불편함이 있다.

 

이러한 불편함이 있기 때문에 이 onclick과 같은 event 안에서 실행되는 코드(onclick="~~")들은 이 코드가 속해있는 태그, 즉 index 태그(id="night_day")인 그 태그를 가리키도록 약속되어 있는 특수한 키워드가 있다. 바로 this 이다.

 

위의 코드는 조건을 보면 자기 자신을 가리키고 있다. (document.querySelector('#night_day').value) onclick event가 속해 있는 태그 자신이다. 그러므로 저 코드들을 this를 이용해서 바꾸면 아래와 같이 된다. 

 

<input type="button" value="night"onclick="
if(this.value === 'night'){
  document.querySelector('body').style.backgroundColor='black';
  document.querySelector('body').style.color='white';
  this.value='day';
  }
else{
  document.querySelector('body').style.backgroundColor='white';
  document.querySelector('body').style.color='black';
  this.value='night';
}">

 

위의 코드와 비교했을 때 훨씬 간결해진 것을 볼 수 있다. id값을 없애고, document.querySelector('#night_day')를 this로 바꿔준 것이다. 해당 코드를 여러개 복사해 붙여넣어 버튼을 여러개 만들었을 때 기능도 제대로 실행되는 것을 확인할 수 있다. 바로 this라는 키워드를 통해 가능한 일이다. (유지보수가 쉬워진다!)

 

또 document.querySelector('body') 부분이 중복되어 나타나는데, 중복제거는 코딩에서 아주 중요한 부분이다.

 

  <input type="button" value="night"onclick="
  var target = document.querySelector('body')
  if(this.value === 'night'){
    target.style.backgroundColor='black';
    target.style.color='white';
    this.value='day';
    }
  else{
    target.style.backgroundColor='white';
    target.style.color='black';
    this.value='night';
  }">

 

위와같이 document.querySelector('body')를 변수 target의 값으로 지정하여 중복을 제거할 수 있다.

이렇게 변수라는 것을 활용하면 코딩을 하는 데 큰 도움을 받을 수 있다.