[부스트코스]Javascript 제어문 퀴즈 6

Q>

다음과 같은 코드에서 리팩토링을 진행할 수 있는 부분을 찾아서 고쳐봅시다.

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

 

A>

<script>
    var h1_target = document.querySelector('h1');
    var body_target = document.querySelector('body');

    if (h1_target.value === 'night') {
        body_target.style.backgroundColor = 'black';
        h1_target.style.color = 'white';
        h1_target.value = 'day';
    }
    else {
        body_target.style.backgroundColor = 'white';
        h1_target.style.color = 'black';
        h1_target.value = 'night';
    }
</script>

 

중복 되는 document.querySelector('body') 와 document.querySelector('h1')을 변수로 만들어서 리팩토링 한다.

 

https://www.boostcourse.org/cs124

자바스크립트의 시작