WEB2 - JavaScript 24 to 27 (함수, function)

728x90

함수(function) 예고

함수 하면 떠오르는 것이 수납상자이다.

살면서 집에 살림이 많아지면 수납상자를 장만해서 정리정돈을 한다. 이와 마찬가지로 코드가 많아지면 이것을 잘 정리 정돈하기 위한 도구들이 필요하다. 그 첫 번째로 생각할 아주 간단하면서도 강력한 도구가 함수이고, 이것보다 좀 더 큰 도구는 객체라는 것도 있다.

이번 시간에는 먼저 함수를 살펴보자.

Ex) 3.html 예제에서 <input> 태그 안에 onclick 속성 안에 JS 가 있는데 이 <input> 태그가 1억 개가 있다고 가정하자. 그리고 그 안에 있는 style.color 를 다 바꿔야 한다고 가정하자. 다 바꿀 수 있을까? 또 여러 개의 <input> 태그가 있는데 어느 정도 길이가 길어지면 서로 같다는 것을 눈으로 확인하기 어렵다. 이럴 때를 가정하여 함수를 사용해보자.

함수(function) 이론
- 기본 문법

ex9.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Function</h1>
    <h2>Basic</h2>
    <ul>
      <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>
    </ul>
  </body>
</html>

이렇게 반복문을 쓸 수 없는 경우가 있다. 연속적으로 반복되는 것이 아니라 연속적이지 않게 반복된다면 반복문을 사용하는 것이 어렵거나 불가능해진다.

function = '웹브라우저야, 나는 지금부터 함수를 만들거야'
two = 함수의 이름
{ } = 중괄호 안에 반복되는, 재사용하고 싶은 코드를 넣기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Function</h1>
    <h2>Basic</h2>
    <ul>
      <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>
    </ul>
  </body>
</html>

웹브라우저는 function 을 보면 two 라는 함수이고 그 내용은 중괄호 안에 있는 것으로 기억한다.

two( ); 를 보면 two 라는 함수가 있고 괄호가 열고 닫힘으로 인해 여기에 two 라는 함수를 실행.

매개변수와 인자
Parameter & Argument

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

매개변수(Parameter), 인자(Argument) 는 입력에 해당되며 'Return'은 출력에 해당된다.

ex9.html

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

이렇게 하면 onePlusOne 이라는 함수는 언제나 똑같이 동작하는 함수이다.

함수를 실행할 때 어떤 입력값을 주면 함수가 그 입력값에 따라서 다른 결과를 출력하게 한다면?

Ex)

sum(1,17); // 18
sum(8,20); // 28

이렇게 단순히 더하기가 아니라 정말 복잡한 코드라면?

sum 이라는 하나의 함수로 입력값이 무엇이냐에 따라 다른 결과를 화면에 출력할 수 있게 된다면?

    <script>
    function sum(left,right){
      document.write(left+right+'<br>');
    }
    sum(1,17); // 18
    sum(8,20); // 28
    </script>

sum (1,17) 을 18로 출력하려면 function sum (괄호) 안에 변수를 넣어야 한다.
예제에서는 (left, right) 로 변수를 정의한다. 이 변수를 매개하는 변수라고 하며 영어로 Parameter 라고 한다.

function sum(left, right){

document.write( );

}

에서 sum(1, 17) 을 실행하려면 left 값은 1 로 약속되어 있고 right 의 값은 17 로 약속되어 있다.

그럼 출력부분 document.write(left+right+'<br>') left 변수와 rigth 변수를 더하고 <br>태그로 보기 좋게 줄바꿈하자.

여기서 함수로 전달하는 sum 괄호 안의 1 과 17 이라는 값을 한국어로 인자, 영어로 argument 라 하며

그리고 이 값을 받아서 함수 안으로 매개해주는 변수들 (left 와 right)을 매개변수, parameter 라고 부른다.

리턴 Return

위의 매개변수와 인자의 예제에서 처럼 딱 document.write(left+right+'<br>'); 이것의 기능만 필요하다면 나쁜 코드가 아니다. 하지만 무언가를 더하는 작업이 매우 복잡하고 힘든 일이면서 그렇게 더해진 결과를 다양한 방법으로 사용해야 한다면...

만약 색을 변경해야 한다면?

	<script>
    function sum(left,right){
      document.write(left+right+'<br>');
    }
    function sumColorGreen(left,right){
      document.write('<div style = "color:green">'+left+right+'</div><br>');
    }
    sum(1,17); // 18
    sumColorGreen(1,17); // 18
    sum(8,20); // 28
    </script>

sum2 함수를 새로 만들어 sum2(1,17) 가 숫자 18에 대한 표현식을 만들어 보자.

    <script>
      function sum2(left,right){
        return left+right;
      }
      document.write(sum2(1,17)+'<br>');
      document.write('<div style="color:green">'+sum2(1,17)+'</div>');
      document.write('<div style="font-size:5rem;">'+sum2(1,17)+'</div>');
    </script>

계산이라는 기능만을 이 sum2 라는 함수가 구현함으로써 저 원자화된 기능을 다양한 맥락에서 활용할 수 있는 자유도가 생기게 된 것이다. Return 이 주는 엄청난 혜택.

함수 sum2 에 들어가 있는 left 와 right 라는 것에 매개변수를 통해 들어간 값을 return 을 통해서 출력함으로써 다양한 용도로 함수를 활용할 수 있게 된다는 중요한 얘기를 했다.

ex9.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Function</h1>
    <h2>Basic</h2>
    <ul>
      <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>
    </ul>
    <h2>Parameter & Argument</h2>
    <script>
    function onePlusOne(){
      document.write(1+1+'<br>');
    }
    onePlusOne();
    function sum(left,right){
      document.write(left+right+'<br>');
    }
    function sumColorGreen(left,right){
      document.write('<div style = "color:green">'+left+right+'</div><br>');
    }
    sum(1,17); // 18
    sumColorGreen(1,17); // 18
    sum(8,20); // 28
    </script>
    <h2>Return</h2>
    <script>
      function sum2(left,right){
        return left+right;
      }
      document.write(sum2(1,17)+'<br>');
      document.write('<div style="color:green">'+sum2(1,17)+'</div>');
      document.write('<div style="font-size:5rem;">'+sum2(1,17)+'</div>');
    </script>
  </body>
</html>

저작자표시

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

WEB2 - JavaScript 29 (객체 'object' 의 예고) (0)	2021.09.27
WEB2 - JavaScript 28 (함수의 활용) (6)	2021.09.24
WEB2 - JavaScript 23 (배열과 반복문의 활용) (5)	2021.09.19
WEB2 - JavaScript 19 to 22 (반복문, 배열) (8)	2021.09.17
WEB2 - JavaScript 18 (리팩토링 중복의 제거) (6)	2021.09.15

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

티스토리툴바