함수 이용 EX

<input type="button" name="" value="night" onclick="      

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

">

위와 같은 긴 코드를 함수처리 하기 위해 복붙하면 작동이 제대로 되지 않는다. 

위 코드는 html의 <input type="button" name="" value="night" onclick=" 코드 "> 에 종속되어 있는 

코드이기 때문에 해당 코드의 id value 값을 뜻하는 this.value는 종속된 코드의 this이므로

함수값으로 올려버리면 위의 input value 값을 인식할 수 없게 되버리기 때문이다. 

즉, 위 코드를 함수값으로 올리려면 

    function nightDayHandler(self){
      var target = document.querySelector('body')
      if(self.value === 'night'){
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        self.value = 'day';
        var link = document.querySelectorAll('a')
        var i = 0;
          while(i < link.length){
            link[i].style.color = 'powderblue';
            i = i + 1;
          }
      } else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        self.value = 'night';
        var link = document.querySelectorAll('a')
        var i = 0;
          while(i < link.length){
            link[i].style.color = 'blue';
            i = i + 1;
          }
      }
    }

함수 이름의 Parameter에 값을 넣고 this 가 들어가야하는 id value에 해당 Parameter를 넣는다.

위에는 self를 넣었다. 이후 input 코드에 해당 함수를 넣을때 Argument 값을 this로 지정해주면

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

이렇게 코드가 짜지는데, 이때 Argument의 값이 this이므로 위의 함수에선 Parameter를 this로 인식하고 해당 코드는

위 함수의 self가 this로 변해서 입력된거로 인식하기 때문에

<input type="button" name="" value="night" onclick="     

    var target = document.querySelector('body')
      if(this.value === 'night'){
        target.style.backgroundColor = 'black';
        target.style.color = 'white';
        this.value = 'day';  <===== 여기 this 값은 self 값이였지만 Argument가 this이기 때문에 this로 교체됨 
        var link = document.querySelectorAll('a')
        var i = 0;
          while(i < link.length){
            link[i].style.color = 'powderblue';
            i = i + 1;
          }
      } else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        this.value = 'night';
        var link = document.querySelectorAll('a')
        var i = 0;
          while(i < link.length){
            link[i].style.color = 'blue';
            i = i + 1;
          }
      }

">

와 같이 작동한다. 

      function plus(left,right){
        document.write(left+right+'<br>')
      }
      plus(1,2);
      plus(3,4);

이 코드와 원리가 같다.