[자바스크립트의 시작] (3) Javascript 제어문 리팩토링(중복제거)

리팩토링

  리팩토링이란 비효율적인 코드를 효율적으로 만들어 가독성을 높이고 유지보수를 쉽게 만드는것. (코드의 기능적인 면의 변화는 없다.)

 

 

리팩토링 - this 사용.

if(document.querySelector('#toggle').value  === 'night'){
    document.querySelector('body').style.backgroundColor= 'black';
    document.querySelector('body').style.color= 'white';
    document.querySelector('#toggle').value = 'day';
}
else{
    document.querySelector('body').style.backgroundColor= 'white';
    document.querySelector('body').style.color= 'black';
    document.querySelector('#toggle').value = 'night';
}

이 코드가 1만개일 경우 id값을 각각 바꿔줘야 한다. 이는 매우 비효율적이다. 이를 해결하기 위해 this를 사용한다.

 

this는 자기 자신을 가리키는 키워드이다.

따라서 document.querySelector('#toggle') 대신 this 사용 가능하다.

if(this.value  === 'night'){
	document.querySelector('body').style.backgroundColor= 'black';
    document.querySelector('body').style.color= 'white';
    document.querySelector('#toggle').value = 'day';
}
else{
	document.querySelector('body').style.backgroundColor= 'white';
    document.querySelector('body').style.color= 'black';
    document.querySelector('#toggle').value = 'night';
}

 

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

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

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

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

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

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

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

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

리팩토링 - 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';
}">

이 코드에서 document.querySelector('body') 는 4번 등장한다. .

 

중복인 부분 제거

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

중복인 부분을 제거하고 하나의 변수로 선언하면 변수의 내용만 수정하면 되므로 유지보수에 장점이 있다.