자바스크립트의 시작 정리 5번째: 리펙토링

오늘의 정리

18. 리팩토링(중복의 제거)

리팩토링

리팩토링

리팩토링은 비효울적인 코드를 효율적으로 만들어서 기능적으로 동일하나 가독성이나 유지보수가 쉽도록 하는 것입니다.

this 사용하기

Javascript에는 자기 자신을 가리키기 위한 this라는 키워드가 있습니다. onclick에서 실행되는 자바스크립트에서 this를 사용하게 되면 onclick이 속해 있는 태그 input을 가리킨다고 합니다. 블로그를 정리하기 위해 정확한 개념?이 무엇인지 알기 위해서 MDN문서를 읽어보았지만 아직은 이해가 되지 않았습니다ㅠ..

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

document.querySelector('#night_day') 대신 this를 사용하면 코드는 다음과 같습니다.

<input id="night_day" 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')

이 부분입니다. 이것을 target이라는 변수를 만들어서 변수에 대입하면 중복을 없앨 수 있습니다.

<input id="night_day" 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) 다음과 같은 코드에서 리팩토링을 진행할 수 있는 부분을 찾아서 고쳐봅시다.

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