[JS] 15. 함수의 기본사용법, 매개변수, 인자, 리턴

      <script>
        document.write('<li>1</li>');
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
        document.write('<li>3</li>');
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
      </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-1, 2-2에 대한 내용을 two()라는 함수로 작성했습니다.

function two() 그리고 대괄호안의 내용이 함수를 선언하는 내용입니다.

즉, two라는 함수를 선언했고 two()함수의 내용은 2-1,2-2가 출력되는 태그의 내용이 됩니다.

이렇게 선언된 함수를 사용하기 위해서는,

해당하는 함수를 원하는 위치에 코딩하면 됩니다.

two(); 이렇게요

위 코드의 결과는 처음 작성된것과 동일하죠.

단지 함수로 해당하는 코드를 묶었을 뿐입니다.

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

자판기를 보시면 다양한 메뉴가 있습니다. 원하는 메뉴를 누르면 해당하는 메뉴에 있는 물품이 나오게 되죠. 함수도 이와 동일하게 작용하는데, 이렇게 다양한 메뉴에 해당하는 항목(입력)을 매개변수라고 합니다.

예제를 통해서 어떻게 사용하는지 알아보겠습니다.

먼저 1+1이라는 계산을 함수를 통해서 아래와 같이 코딩해봤습니다.

    <script>
          function onePlusone(){
            document.write(1+1);
          }
          onePlusone();
    </script>

결과는 아래와 같이 나오겠죠.

그런데 저렇게 결과값이 나오게 되어있다면 함수의 사용이 필요가 없겠죠?

그래서 이런 코딩을 해봤습니다.

2,3을 입력하면 5가 출력되는 sum()이라는 함수를 작성해볼텐데요

sum 함수안에 (left, right)라는 변수값을 넣고,

매개변수로 입력받은 left와 right값을 더해서 출력해줍니다.

여기서 간단히 용어를 정리하면,

sum(2,3) 안에 들어가는 입력값 2, 3을 인자(argument)라고 합니다.

그리고 이렇게 입력된 인자값을 받아서 함수 안으로 매개해주는 변수를 매개변수(parameter)

이라고 부릅니다. (아래 그림에서는 function sum 괄호 안의 left, right가 매개변수에 해당합니다.)

그럼 이런 결과가 나오겠죠?

3. 함수의 리턴

이번시간에는 함수의 리턴에 대해서 알아보겠습니다.

먼저 기존에 작성된 함수에서 하나 더 추가했습니다.

동일한 내용인데 빨간색으로 출력을 하는 함수인데요.

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

네, 결과는 아래와 같습니다.

빨간색으로 출력을 한다든지, 다양한 형태로 결과값을 보여주고 싶을때가 많죠.

이처럼 함수의 기본내용은 동일하나 그 결과값을 활용해서 다양한 형태로 보여주고 싶을때가 있습니다.

이러한 경우 어떻게 함수를 사용해야 하는지를 살펴볼께요!!

아래와 같이 return에 결과값을 출력하게 하고 각 문구에는 이 함수(sum2)를 호출하도록 했습니다.

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

결과는 이렇게 됩니다.