리팩토링

리팩토링이란 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수가 쉽도록 만드는 것

this 를 사용하여 리팩토링

예시코드

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

만약에 위에 코드를 여러개 생성해야될 필요가 있을 경우가 생겼다면
#night_day 부분의 이름을 계속 바꿔주면서 만들어 줘야될 것이다.

이럴 경우에는 버튼 자체(자기자신)를 가리키는 this를 사용하자.

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

코드가 조금 더 읽기 쉬워졌지만 아직 중복되는 부분이 있다.
바로 document.querySelector('body') 이 코드다.

이럴 때는 간단하게 변수를 만들어서 가독성이 좋게 만들어주자.

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

target 이라는 변수를 생성하여 그안에 코드를 넣어주었다.
이렇게 되면 나중에 target안에든 'body'를 변경할 때도 여러번 바꾸지 않고 한번에 효율적으로 변경이 가능하다.