TIL#06 함수(매개변수,인자,리턴)

 

 

25강 함수

 

함수는 영어로 function이라고 부른다.

 

함수는 코드를 잘 정리정돈 하기 위한 도구나 수납상자이다.

 

나중에 객체를 배우면 메소드(method)라고 부르는 경우도 있다.

 

See the Pen 함수 기본 by egoing (@egoing) on CodePen.

코드가 연속적으로 반복된다면 반복문을 쓰겠지만

 

연속적이지 않게 반복된다면 반복문을 쓸 수 없다. 

 

이럴 때 등장하는 것이 함수이다.

 

<script>
        function two(){
          document.write('<li>2-1</li>');
          document.write('<li>2-2</li>');
        }
</script>

함수를 만들 때 앞에 function이라고 적어준다.

 

그리고 만들려는 함수의 이름을 알려준다. 여기서는 two

 

괄호( )는 나중에 설명하고 그 다음 중괄호 { }에 반복되는, 재사용하고 싶은 코드를 붙여넣기 한다.

 

 

함수를 사용할 때 two(); 이렇게 적어주면 된다.

 

 

26강 함수: 매개변수와 인자

 

 

우리가 지금까지 살펴본 함수는 자판기에 제품에 하나밖에 없어서

언제나 똑같은 제품을 받을 수 있는 자판기이다.

 

원하는 제품을 선택하면 해당되는 구체적인 제품을 제공해 주는 자판기가 있다면 훨씬 더 효용이 있을 것이다.

 

 

 

제품을 선택하는 것은 '입력'

 

자판기가 그 입력에 대해 해당된느 제품을 제공하는 것은 '출력'이라고 할 수가 있다.

 

입력과 출력에 해당되는 것이 수학적으로는 함수라는 것이다.

 

 

//////////////////////////////////////////////////////////

 

 

함수는 입력과 출력으로 이어져 있는데

 

입력에 해당되는 것이 '파라미터(parameter)' 한국어로는 '매개변수'

 

                             '어규먼트(argument)' 한국어로는 '인자'이다.

See the Pen 매개변수와 인자 by egoing (@egoing) on CodePen.

 

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

onePlusOne은 언제나 똑같이 동작하는 함수다.

 

sum은 입력값이 무엇이냐에 따라 다른 결과를 화면에 출력하는 함수이다.

 

sum(left, right)에서 left와 right는 한국어로는 매개하는 변수라고 해서 매개변수(parameter)라고 부른다.

 

sum(2,3)에서 2와 3이라는 값을 한국어로는 인자(argument)라고 부른다.

그리고 이 값을 받아서 함수 안으로 매개해주는 변수를 매개변수라고 하는 것이고.

 

 

27강 함수: 리턴

 

출력은 리턴(return)이라고 부른다.

 

리턴을 하기전에 표현식(expression)이라는 것이 무엇인지를 알아보자.

 

console

>1+1                  1+1은 2에 대한 표현식이다.

<2

 

>2-1                    2-1은 1에 대한 표현식이다.

<1

 

>1===1               1===1은 true에 대한 표현식이다.

<true

 

 

함수도 마찬가지다.

 

/////////////////////////////////////////

 

 

 <script>
      function sum(left, right){
        document.write(left+right+'<br>');
      }
      sum(2,3); // 5
      sum(3,4); // 7
 </script>

 

이전에 만든 sum함수를 실행시키면 

 

1.좌항가 우항을 더한다.

2.<br>태그를 뒤에 추가해서 줄바꿈을 해준다.

3.화면에 써 준다.

 

이렇듯 여러가지 기능이 있지만 

 

이제는 전부 다 빼고 sum을 실행시키면 나오는 값인 '5가 되는 표현식'을 만들고 싶다.

 

그걸 위해서 return이 필요하다.

See the Pen 함수 - 리턴값 by egoing (@egoing) on CodePen.

<h2>Return</h2>
    <script>
      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>');
    </script>

 

sum2를 실행한 결과가 sum처럼 무언가를 실행하는 것이 아니라

 

left+right를 더한 값을 돌려 준다면 sum2(2,3)이 5에 대한 표현식이 된다.

 

'돌려준다' 즉, return이다.

 

계산이라는 기능만을 이 sum2라는 함수가 구현함으로써 

 

우리는 저 원자화된 기능을 다양한 맥락에서 활용할 수 있는 자유도가 생기게 되었다!

 

 

 

 

 

28강 함수의 활용

 

함수를 이용해서 코드를 효율적으로 바꾸는 리팩토링 작업이다.

 

See the Pen 함수의 활용 by egoing (@egoing) on CodePen.

nightDayHandler라는 함수 안에 onclick의 자바스크립트를 담아서 효율성을 높였다.

 

function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){          // this를 self로 바꿨다.
      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 = i + 1;
      }
    } 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 = i + 1;
      }
    }
  }

onclick이라는 이벤트 안에서 this는 input태그를 가르키고 있었지만 

 

우리가 독립된 함수(function)를 만들게 되면 this는 더 이상 input이 아니라 

 

전역객체를 가리키게 된다.

웹브라우저에서는 윈도우를 가리키게 된다. (이건 지금은 이해하지 못한다. 넘어가야한다.)

 

 

그래서 this의 값을 input을 가리키게 하기 위해서 매개변수를 이용해야한다.

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

input태그 안의 nightDayHandler에 this인자 값을 주고 function에는 self라는 매개변수를 주는 것이다.