생활코딩 Javascript #7 리팩토링(중복 제거)

Javascript #7 리팩토링(중복 제거)

 

 

18. 리팩토링 중복의 제거

코드를 효율적으로 만들어서 가독성 을 높이고 유지보수를 편리하게 만드는 것.

그리고 중복된 코드를 낮추는 방향으로 코드를 개선하는 것.

→ 규모가 커지는 프로그램을 틈틈이 리팩토링을 해야 좋은 프로그램을 만들 수 있다.

 

 

1) 같은 코드를 똑같이 복사하여 버튼을 두개 만든 경우

- 두번째 버튼을 눌러도 value 값이 첫번째 버튼만 변경된다.

- 해결법 : id 값을 지우고, document.querySelector('#night_day') 부분을 전부 this 로 변경

<!-- 변경 전 -->
<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';
    }
">


<!-- 변경 후 -->
<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 를 사용해서 해당 코드 내에서 작용하도록 변경

 

 

 

2) 변수 이용해서 중복 제거

- 공통된 부분을 변수로 두어 중복을 제거하여 코드를 간단하게 만들 수 있다.

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

- document.querySelector('body') 를 target 이라는 변수로 지정한 것