[JavaScript-생활코딩] 15. 리팩토링(refactoring)

https://opentutorials.org/module/3180/18801

리팩토링(refactoring) - WEB2 - JavaScript

<h1><a href="index.html">WEB</a></h1>
  <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';
    }
  ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
  </p>

(Refactorying = 공장으로 다시 보내서 좀 더 개선한다)

리팩토링 : 동작하는 것을 그대로 두고, 코드 자체를 효율적으로 만들어서 가독성 높이고 유지 보수를 쉽게 만든다.

​

중복의 제거는 효율성을 높이는 것이기에, 매우 중요하다.

if(this.value === 'night'){
document.querySelector('body').style.backgroundColor='black';}

1. 위에 코드는

if(document.querySelector('#night_day2)​.value === 'night'){

document.querySelector('body').style.backgroundColor='black';}

에서

document.querySelector('#night_day2) 부분을 this로 변경 했다.

​

현재 value값이 night 이므로 this로 값을 써주기만 하면 된다.

if 안에 있는 코드가 사실상 자기 자신이므로.

​

2.이렇게 수정하면,

<input id="night_day" type="button" value="night" onclick="

if(this.value === 'night'){

document.querySelector('body').style.backgroundColor='black';}

위 코드에서 id="night_day" 도 삭제할 수 있다.

<input type="button" value="night" onclick="
if(this.value === 'night'){
document.querySelector('body').style.backgroundColor='black';}

3.또 중복된 코드인 document.querySelector('body') 도 계속 중복 되므로,

var target = document. querySelector ('body')로 target 변수 지정해서 더 짧은 코드로 변경한다.

＊target변수는 input 태그안에서만 유용하다.

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

 

 

*똑같은 코드 여러개 선택 (같은 문자열 중복) : ctrl + D

​