19. 리팩토링, 중복의 제거.

팩토리 : 공장

리 : 다시

리픽토링 : 코딩에서 생기는 비효율적인 부분 제거(중복된 코드 낮추고 개선하는 과정 -> 좋은 프로그램으로 가는 길)

 

this를 활용하자.

 

<input id="night_day" type="button" value="night" onclick="
    if(document.querySelector('#night_day').value === 'night')~~~~~">

여기서 document.querySelector('#night_day') 은 사실상 자기자신을 가리키고 있음.

이 부분을 this로 대체

그러면 id를 참조하는 것은 의미가 없기 때문에 지워버림.

 

왜 .value에만 this를 활용할 수 있는것인가? 생각했는데 style은 css라서 그런 것 같음.

this에 대해서 검색 해 봤는데 좀..어려운 개념인 것 같아서 일단은 수박 겉햝기라도 인덱스 내에서 자기자신을 가리킬 때 활용하는 거라고 이해하고 넘어가도록 하겠다.

 

 

중복은 무조건 없애자

그러기 위해 변수 활용.

document.querySelector('body')이 계속 반복되고 있음

var target = document.querySelector('body') 으로 변수를 설정하면

 

<기존 코드>

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

 

<this와 변수를 활용하여 리팩토링한 코드>

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

조건문 어떻게 쓰는지 알아봤따.

 

---

쓰읍.. this 어려운데...

자바에서 변수를 선언할 때는 var를 쓰는가 보다.