[JavaScript] 리팩토링(refactoring)

리팩토링(Refactoring)

공장으로 다시 보낸다. 개선한다.

코딩을 하다보면 코드가 비효율적으로 작성된다. 그 때 코드의 효율성, 가독성을 높여서 유지보수 하기 편리하게 만들고 중복된 코드를 낮추는 방향으로 코드를 다시 개선하는 작업을 리팩토링이라고 한다.

리팩토링을 잘해야 복잡한 프로그램을 만들 때 좋은 프로그램으로 만들 수 있다.

 

조건문 리팩토링

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

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

문제점

1. 버튼을 추가로 넣을 때마다 ID값을 새로 만들어줘야 한다.

2. 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';
    }
    ">

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

리팩토링

 

1. 자기자신을 가르키는 키워드인 this를 사용한다.

document.querySelector('#night_day') 부분을 this로 수정하고 #night_day를 삭제.

2. 변수를 사용해서 중복을 제거한다.

var target = document.querySelector('body'); 변수를 선언해주고, document.querySelector('body');를 변수명으로 수정해준다.