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 = '#a9a9a9';
      document.querySelector('body').style.color = 'black';
      document.querySelector('#night_day').value = 'night';
    }

    ">

그래 쓰면서도 뭔가 너무 길고 지저분해보였다. 공장에 다시 돌려보낼 필요가 있는 코드

 

저 위에 있는 document.querySelector('#night_day')라는 코드는 위에 있는 버튼 자기 자신을 가르키는 코드이다. 

근데 이게 너무 길어지기도 하고, 아이디 값을 매번 새로 줘야하기 때문에 반복적이다. 그래서 자기 자신을 가르키는 명령어인 '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 = '#a9a9a9';
      document.querySelector('body').style.color = 'black';
      this.value = 'night';
    }

 

this 선택자를 통해서 위와 같이 간결하게 코드를 바꿔줬다. 

그리고 또 중복이 있다면 저 document.querySelector('body'); 이다. 이거는 변수 target에 담아버리고 그 다음부터는 변수를 사용해주면 된다. 

 

    <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 = '#a9a9a9';
      target.style.color = 'black';
      this.value = 'night';
    }
    ">

 

 

끄읕