생활코딩 WEB2-JavaScript ( 리팩토링(refactoring) ~ 함수의 활용)

리팩토링 중복의 제거

코딩을 하고 나면 코드가 비효율적인 면들이 생기기 마련인데 여기서 동작하는건 그대로 두고 코드 자체는 효율적으로 만들어서 그 코드의 가독성을 높이고 중복코드를 줄이고 유지보수를 편리하게 하는 이러한 방향으로 코드를 개선하는 작업을 리팩토링이라고 한다.

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

위에 코드를 보면 몇개 반복되는 문장들을 볼 수 있는데 이 코드를 리팩토링 하면 더 가독성을 높일 수 있다. 

리팩토링 하기전 잠깐 this라는 개념에 대해 알아보면 위에 onclick과 같은 이벤트 안에서 실행되는 코드들은 즉 이 구간안에서는 이 코드들이 속해있는 태그 (즉 여기서는 input 태그를 의미함) 를 가리키도록 약속되어 있는 특수한 키워드가

있는데 바로 this 이다. 그리고 이 코드 document.querySelector('#night_day')가 onclick 이벤트가 속해있는 input 태그를 가리키는거나 다름이 없다. 따라서 이 코드는 this로 바꿔도 같은 역할을 하는것이다. 그리고 id값도 지워야함

(맞게 이해한건지는 모르겠는데 이거 이해하는데 엄청 오래걸림;)

다음으로 document.querySelector('body') 이 코드도 반복되는것을 볼 수 있는데 이거는 변수 하나 선언해서 하면된다

var target = document.querySelector('body');

그러면 저 반복되는 코드를 target으로 바꿔주어도 같은역할을 하는 것이다. 최종적으로 보면은 이렇게 된다.

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

배열

영어로는 array 라고 하고 ["ㅁ" , "ㅇ"] ; 콤마로 구분하고 이런 모양새다 ex) var hoho = ['java' , 'C'] ; 이런식으로 할 수 있다.

<script>
  var coworkers = ["egoing", "leezche"];
</script>
<script>
  document.write(coworkers[0]);
  document.write(coworkers[1]);
</script>
<!-- 배열의 몇번째 있는거를 출력 -->
<script>
  coworkers.push('duru');
  coworkers.push('taeho');
</script>
<!-- push는 추가하는것 -->
<script>
  document.write(coworkers.length);
</script>
<!-- 배열의 갯수 세는것 -->

위에 코드들 처럼 배열은 여러가지 명령들이 있는데 이를 처음부터 외우는것보다는 검색해서 그때마다 찾아서 쓰는것이 더 중요하다.

반복문

조건문과 함께 프로그램에 실행순서에 흐름을 제어하는 제어문이라고 할 수있다.

var n = 0;

while (n < 3) {
  n++;
}
<!-- 예시  조건식을 정해서 얼마만큼 반복할건지 정하는게 중요하다 조건식이 true일때는 계속해서 반복하기
때문이다. -->

배열과 반복문

<script>
      var coworkers = ['egoing','leezche','duru','taeho'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i < coworkers.length){
          document.write('<li>'+coworkers[i]+'</li>');
          i = i + 1;
        }
      </script>
</ul>

while () 안에 조건식을 i < 4 이런식이 아닌 coworkers.length를 이용해서 배열의 수가 늘어나도 조건식을 그때마다 바꿔주지 않아도 된다 

배열과 반복문 활용

night day 버튼을 누를때마다 링크가 있는 글자색이 달라지는것을 해보자면 아래 코드를 이용할수 있다

var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }

여기서 document.querySelectorAll('a'); 이 부분은 뭐냐면 a태그를 선택한다는 의미인데 기존에 querySelector를 사용하면 a태그 하나만 가져오기 때문에  querySelectorAll을 사용해야 한다. 콘솔 창에 입력하면 NodeList(4) [a, a, a, a] 이렇게 모든 a 태그를 배열(완벽한 배열은 아님) 형태로 결과가 나와서 배열처럼 사용할수 있다 위에 코드는 글자 색을 powderblue 라는 색으로 변화시켜준다 이를 이용해서 완성된 코드를 보면 

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

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = 'night';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
      }
    }
  ">

왼쪽이 글자색을 파란색으로 오른쪽이 파우더블루 색으로 적용을 한 모습 

함수

영어로는 function 이라고 한다. 대표적인 구조?를 보면 이렇다 

function myFunction() {
    document.write(1+1); //반복되고 싶은 코드 붙여넣기
}

코딩을 하다보면 반복문을 쓸수 없는경우가 있는데 반복되는 코드가 연속적이지 않게 반복된다면 반복문을 쓰기 힘들거나 못쓴다. 이때 바로 함수를 이용하는것이다. 저렇게 함수를 만들고 나서 사용하려면 함수이름(); 이렇게 해주면 된다

함수: 매개변수와 인자

함수는 입력과 출력으로 이루어져 있는데 입력은 매개변수(parameter) & 인자(argument) 로 이루어져 있다

함수로 위에 코드처럼 결과를 표출하는데 만약 입력값에 따라서 다른 결과를 출력할 수있는 함수를 만들 수있다면?

 

function sum(left, right){ // 괄호안에 left, right가 매개변수이고
        document.write(left+right+'<br>');
      }
      
sum(2,3); // 2,3 이 값들이 인자라고 한다 이 두가지는 함수로 들어오는 입력값과 관련이 있다

인자값에 따라서 결과가 위에 코드 처럼 5가 될수 있고 sum(3,4)라고 하면 7이 될 수도 있다.

함수(리턴)

출력은 return 이라고 한다. 어느때 쓰냐면 위에 sum 함수를 변화없이 그냥 저대로 쓴다면 문제가 없겠지만 저 함수를 예를들어서 빨간색으로 만들고 싶다거나 글씨를 크게 하고 싶다거나 하면 함수 자체를 새로 만들어야 된다 이렇게 

 

function sumColorRed(left, right){
        document.write('<div style="color:red">'+(left+right)+'</div><br>');
      }
sumColorRed(2,3);

함수 이름도 바꿔 줘야 하고 새로 내용도 추가를 해줘야 한다. 지금은 1개라서 뭐 별로 안힘든데? 라고 할수 있겠지만 저 코드가 엄청 복잡하고 만들어야 할 개수가 1억개 라면 말이 달라진다 이를 해결하기 위해 나온게 바로 return 이다.

코드를 보면서 설명을 다시 해보자면 

function sum2(left, right){
        return left+right;
      }

document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');

이렇게 return을 사용하면 원래의 함수 밖에서 함수의 값을 활용을 할 수가 있다. 이게 무슨 이야기냐면 위에 sum() 함수는 이미 무언가 실행해야할 결과값을 함수 안에다가 넣어놔서 이 값을 위에처럼 빨간색으로 하고 싶다던지 활용을 할려면 함수 자체를 바꿨어야 했는데 sum2() 함수는 실행한 결과가 sum()함수 처럼 무언가 실행한 결과가 아니라 sum2() 실행한 결과의 값을 돌려준다면? 굳이 새 함수를 만들지 않고 그냥 위에 코드처럼 해주면 된다. 즉 함수 갯수를 줄일 수있다.

함수의 활용

function nightDayHandler(self) {
            var target = document.querySelector('body');
            if(self.value === 'night') {
                target.style.backgroundColor = 'black';
                target.style.color = 'white';
                self.value = 'day';

                var alist = document.querySelectorAll('a');
                var i = 0;
                while( i < alist.length) {
                    alist[i].style.color = 'powderblue';
                    i++
                }
            }
            else {
                target.style.backgroundColor = 'white';
                target.style.color = 'black';
                self.value = 'night';

                var alist = document.querySelectorAll('a');
                var i = 0;
                while( i < alist.length) {
                    alist[i].style.color = 'blue';
                    i++
                }
            }
        }

onclick 내부의 있던 문장을 head 태그 안에 script 태그로 묶어서 nightDayHandler라는 함수로 만든 후에

<input type="button" value="night" onclick="
        nightDayHandler(this);
    ">

이렇게 함수이름을 써줘도 전과 같은 기능을 해준다. 중간중간 this 랑 self 가 바뀌거나 했는데 이건 아직 이해하지 않아도 된다고 해서 나중에 객체 할때 배울려나? 

 

22.06.26 

저 this는 input을 가르키는 거라서 함수를 새로 만들어서 this.value 라고 해도 더이상 input을 가리키는 상태가 되는게 아닌거임 그래서 생각대로 동작이 안됨 .

앞서 배운 함수의 특징을 이용해서 저 새로 만든 함수를 nightDayHandler(self) 이런식으로 매개변수를 self라고 해주고

(매개변수 이름은 의미없음) 함수안에 this도 다 self로 바꾸어준다.

그리고 함수를 실행 시킬때 인자값을 nightDayHandler(this) 이런식으로 this로 해주어서

함수가 동작이 되면 self 안에 this가 들어가서 잘 동작이 되는것이다.