본문 바로가기
TIL/Javascript

/JavaScript/함수(매개변수, 인자, return)(1)

by code_Cook 2021. 12. 30.
함수

함수란 특정 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합이다.

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

 

입력 = 매개변수(parameter)와 인자(argument)

출력 = return

 

먼저 함수가 어떻게 사용되는지 간단한 예시를 통해

형식을 알아보자

<body>
 <ul>
  <script>
   document.write('<li>1</li>');
   document.write('<li>2-1</li>');
   document.write('<li>2-2</li>');
   document.write('<li>3</li>');
  </script>
 </ul>
</body>

웹브라우저에 예시 코드를 출력하게 되면 <li> 태그 안에 있는 숫자들이 

순서대로 나열될 것이다. 하지만 만약 여기서 

document.write('<li>2-1 </li>');
document.write('<li>2-2 </li>');

이 코드가 반복돼야 한다고 한다. 그렇다면 우리는 반복문을 사용하겠지만

 

간혹 반복문을 사용하지 못할 상황이 생긴다. 예를 들면

연속적으로 반복되는 것이 아니라 그렇지 않게 반복되는 상황들

그러한 형태에서는 반복문을 사용하기 힘들 것이다.

 

또한 이러한 코드들이 많이 사용될 때 함수를 사용하면 가능하다.

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

이런 식으로 반복되어야 할 코드를 함수를 만들어 함수 내부에 코드를 넣어주고

표현되어야 할 코드 자리에 함수명('ex1()')을 넣어주면 웹브라우저에 출력된다.

 

웹브라우저에서는 다음과 같이 인식한다.

<script> 태그 안에 function을 만나 ex1이라는 함수를 만들었구나 인식하고

그 안의 내용을 기억하고 있다가

본문에서 함수 명함 수명('ex1()')을 만나 인식하고 해당 코드를 실행하게 되는 구조이다.

 

위에서 말했듯이 함수는 출력과 입력으로 이루어져 있다 했다.

다음은 출력에 대해 알아보자.

 

'TIL > Javascript' 카테고리의 다른 글

/JavaScript/함수(매개변수, 인자, return)(3)  (0) 2021.12.31
/JavaScript/함수(매개변수, 인자, return)(2)  (0) 2021.12.31
/JavaScript/배열과 반복문 사용  (0) 2021.12.29
/JavaScript/반복문  (0) 2021.12.27
/JavaScript/배열  (0) 2021.12.26