[8] 함수

함수는 .... 수납상자! 코드를 정리정돈 할 수 있다.

 

input id="night_day" 태그 안에 배경색과 글꼴색을 변경하는 코드가 들어가있다.

input 태그가 1억개라면...?  color 색상을 다른 색으로 변경하려면...?

또한, 복사하여 만든 버튼들이 완전히 같은 코드 라고 확신하기 쉬울까..?

NO... 일일이 확인해야 한다.

 

목표 : 중복되는 코드를 함수로 만든다. 효율적이고 유지보수가 용이해지도록 리팩토링

 

- 코드 중복 제거를 통한 웹페이지 사이즈 감소

- 효율성 증가

- 유지보수 용이

- 동일한 함수를 호출하고 있다는 점에서 똑같은 로직을 수행하고 있음을 확인하기 쉬움

- 함수명을 통해 함수가 하는 기능에 대하여 이해하기 쉬움

 

1. 함수의 기본

Function, 객체의 메소드(Method)

 

- 파라미터(parameter) , 아규먼트(argument), 리턴(return)

 

연속적이지 않게 반복된다면 반복문을 사용하는 것이 어렵거나 불가능해진다. -> '함수'를 이용하면 된다.

함수를 의미하는 키워드로 function을 쓰고 함수명(파라미터){ 재사용하려는 코드.. } 로 작성하면 된다.

 

<!-- 함수 사용 전 -->
      <script>
        document.write('<li>1</li>');
        document.write('<li>2-1</li>'); // 반복되는 부분(1)
        document.write('<li>2-2</li>');	// 반복되는 부분(2)
        document.write('<li>3</li>');
        document.write('<li>2-1</li>'); // 반복되는 부분(1)
        document.write('<li>2-2</li>'); // 반복되는 부분(2)
        two();
      </script>
 
<!-- 함수 이용 --> 
      <script>
        function two(){ //함수정의
          document.write('<li>2-1</li>'); //반복하려는 코드
          document.write('<li>2-2</li>');
        }
        document.write('<li>1</li>');
        two(); //함수호출
        document.write('<li>3</li>');
        two();
      </script>

 

 

2. 매개변수(parameter)와 인자(argument)

함수는 '입력'과 '출력'으로 이루어져 있다.

 

함수 == 자판기

'입력' : 사용자가 제품을 선택

'출력' : 자판기가 해당하는 제품을 제공

 

입력 - 매개변수(parameter) : 함수정의 시 , 인자(argument) : 함수호출 시

출력 - 반환(return)

 

onePlusOne() 함수는 항상 1+1 의 결과값이 2 를 리턴한다.

    <script>
      function onePlusOne(){
        document.write(1+1);
      }
      onePlusOne(); //함수를 호출하면 언제나 같은 결과를 return 한다. //2
    </script>

 

넘겨주는 값에 따라 다른 결과 값을 얻고 싶다면 ? 

      sum(2,3); //5
      sum(3,4); //7

 

함수 정의

function 함수명( 매개변수정의1, .... , n개) { ...code... }

function sum( param1 , param2 ) { ...code...}

 

함수 호출

함수명( 인자1 , .... , n개 );

sum( argu1 , argu2 );

 

    <script>
      function onePlusOne(){
        document.write(1+1+'<br>');
      }
      function sum(x,y){
        document.write(x+y+'<br>');
      }
      onePlusOne();
      sum(2,3); //5
      sum(3,4); //7
    </script>

 

3. 반환(return)

표현식(expression) ? 

1+1 은 숫자 2에 대한 표현식

2-1 은 숫자 1에 대한 표현식

1===1 은 Boolean 'true'라는 값에 대한 표현식

 

목표 : 

 지금은 sum(2+3); 을 호출하면 sum 함수를 통해서 결과값 5를 화면에 출력하고 있다.

  sum(2+3); 의 호출 결과로 화면에 출력이 아닌 5 라는 숫자결과 값을 표현하는 '표현식'으로 만든다.

 

sum(2+3) 결과를 출력하는 글꼴의 색을 바꾸고 싶다면?

sumColorRed(x,y){...code...} 글꼴색을 바꿔서 출력하는 함수를 새로 만들어야한다.

'+'라는 기능을 무수히 많이 쓴다면, 그 때마다 새로운 함수를 만드는 것이 아니라 '+'한 결과 값을 가져오는 표현식으로 만든 뒤, 글꼴 색을 처리하고.. 기타 작업을 해주면 효율적이다.

    <script>
      function onePlusOne(){
        document.write(1+1+'<br>');
      }
      function sum(x,y){
        document.write(x+y+'<br>');
      }
      function sumColorRed(x,y){
        result = x+y;
        document.write('<div style="color:red;">'+result+'</div></br>');
      }
      onePlusOne();
      sum(2,3); //5
      sumColorRed(2,3); // 5, Red
      sum(3,4); //7
    </script>

비효율적인 코드

 

함수 sum2 는 x, y 라는 매개변수를 통해 들어간 값을 return 을 통해서 결과를 반환함으로써 다양한 용도로 함수를 활용할 수 있게 된다!!

      <script>
        function sum2(x,y){
          return x+y;
        }
        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>');
      </script>

 

 

---

함수의 활용

목표 : night, day 버튼의 기능을 함수를 이용해 코드를 효율적으로 래팩토링

 

<!-- 수정 전 코드 -->
<input type="button" value="night" onclick="
  var target = document.querySelector('body');
  var alist = document.querySelectorAll('a');
  if(this.value === 'night'){
    target.style.backgroundColor = 'gray';
    target.style.color = 'white';
    this.value='day';

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

    var i=0;
    while( i < alist.length ){
        alist[i].style.color = 'black';
        i++;
    }
  }
  ">

 

<!-- 함수를 이용한 코드 리팩토링 -->
  <script>
    function changeMode(self){
      var target = document.querySelector('body');
      var alist = document.querySelectorAll('a');
      if(self.value === 'night'){
        target.style.backgroundColor = 'gray';
        target.style.color = 'white';
        self.value='day';

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

        var i=0;
        while( i < alist.length ){
            alist[i].style.color = 'black';
            i++;
        }
      }
    }
  </script>
  <input type="button" value="night" onclick="changeMode(this)">

 

 

 

onclick 이라는 이벤트 안에서 this 는 이 이벤트가 소속된 태그를 가리키도록 약속되어있는데

독립된 함수를 만들게 되면, 함수 안의 this 는 더이상 input 버튼이 아닌 '전역객체'를 가리키게된다. ( ex. 웹브라우저에서 윈도우 )

이 this의 값을 input 버튼을 가리키게 하기 위해서 nightDayHandler 가 실행될 때, 인자로 this 값을 넘긴다.

self 란 이름의 매개변수로 this 를 받아서 사용하면 된다.