Languages/Java Script

[Js] 함수 | 함수의 형식 | 함수의 정의와 호출 | 입력과 출력

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

함수

함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.

수학의 함수 개념적으로 동일하다.

함수의 형식

함수의 형식은 아래와 같다.

<script>
    function 함수명( [인자...[,인자]] ){
       코드
       return 반환값
    }
</script>

함수를 정의하고 호출해주는 것은, 변수의 선언과 사용법과 비슷하다.

함수의 정의와 호출

함수의 기본적인 키워드는 funcion이다.

function 뒤에 함수의 이름이 오고, 소괄호가 따라온다.

소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다.

인자는 생략 할 수 있다.

함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.

다음 예제를 보자.

이 함수의 이름은 numbering이고, 내용은 0부터 9까지를 화면에 출력한다.

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
	function numbering(){
		i = 0;
		while(i<10){
			document.write(i);
			i +=1;
		}
	}

	numbering();


</script>

</body>
</html>

위에서 function으로 함수를 정의하고, 함수가 끝나면 함수를 호출해보았다.

즉, 제일 하단 구문 쪽 numbering();이라는 이름의 함수가 호출된 것이다.

결과는 아래와 같다.

함수에서 중요한 것은 "재사용성"이고,

이 함수를 사용하는 모든 곳에서 변경이 매우 용이하기 때문에 함수를 사용하는 것은 매우 효율적이다.

만약 이러한 함수가 없다면?

함수가 없다면

0~9까지 출력하는 코드를 출력하는 것을 예로 들어보자.

만약 프로그램을 짤 때, 0~9까지 출력하는 코드를 총 5번 반복해서 출력한다면 어떻게 될까?

<script>
      var i = 0;
      while(i < 10){
          document.write(i);
          i += 1;
      }

      var i = 0;
      while(i < 10){
          document.write(i);
          i += 1;
      }

      var i = 0;
      while(i < 10){
          document.write(i);
          i += 1;
      }

      var i = 0;
      while(i < 10){
          document.write(i);
          i += 1;
      }

      var i = 0;
      while(i < 10){
          document.write(i);
          i += 1;
      }
</script>

바로 위와같이 코드가 매우 복잡하고, 길어질 것이다.

그런데 이러한 작업을 1000번, 10000번 해야 한다면?

그리고 그 작업에 수정이 들어간다면?

정말 비 효율적이며, 암담할 것이다.

"함수"는 이러한 문제를 현저히 줄일 수 있다.

아래 예시를 살펴보자.

<script>
      function numbering(){
          var i = 0;
          while(i < 10){
              document.write(i);
              i += 1;
          }   
      }

      numbering();
      numbering();
      numbering();
      numbering();
      numbering();
</script>

결과는 같지만 로직은 단 한번만 등장하므로,

수정과 재사용이 매우 간편해진다.

입력과 출력

함수의 핵심은 입력과 출력이다.

입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할이다.

다음은 함수에서 입력과 출력의 역할을 하는 구문들에 대한 설명이다.

return

함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환한다. 동시에 함수를 종료시킨다.

아래 내용을 보자. 결과는 egoing과 k8805다.

<script>
      function get_member1(){
          return 'egoing';
      }

      function get_member2(){
          return 'k8805';
      }

      alert(get_member1());
      alert(get_member2());
</script>

get_member1와 get_member2를 출력(alert)한 결과가 각각 egoing과 k8805인 이유는

함수 내에서 문자열 egoing과 k8805을 return을 하기 때문이다.

return은 결과를 반환하는 것 외에 함수를 중지시키는 역할도 한다.

다음 코드를 보자. 결과는 egoing이다.

<script>
    function get_member(){
        return 'egoing';
        return 'k8805';
        return 'sorialgi';
    }
    alert(get_member());
</script>

return이 등장하였기 때문에 값을 반환해주고 종료 시키기 때문이다.

즉, 이후에 return값들은 무시가 되어 실행되지 않는다.

간단하게 "출력 :return, 입력 : 인자" 이렇게 생각하면 된다.

인자

인자란?

인자(argument)는 함수로 유입되는 입력 값을 의미하는데,

어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다.

다음 예를보자. 결과는 1,2이다.

<script>
      function get_argument(arg){
          return arg;
      }

      alert(get_argument(1));
      alert(get_argument(2));
</script>

alert(get_argument(1));의 get_argument(1)은 1행에서 3행 사이에 정의된 함수를 실행하는 구문이다.

alert(get_argument(1));의 1은 get_argument로 1이라는 값을 전달하겠다는 의미다.

이 때 1행에 정의된 (arg) 구문에 의해서 변수 arg의 값으로 숫자 1이 함수 안으로 전달된다.

이 변수 arg는 함수 get_argument 안에서만 유효하다. 이 관계는 아래와 같다.

복수의 인자

그럼 여러개의 입력 값을 받고 싶다면 어떻게 해야할까?

다음 예제를 보자. 결과는 30과 50이다.

<script>
      function get_arguments(arg1, arg2){
          return arg1 + arg2
      }

      alert(get_arguments(10, 20));
      alert(get_arguments(20, 30));
</script>

위의 예제를 그림으로 나타내면 아래와 같다.

즉 함수를 호출 할 때 전달한 인자 10과 20은 함수의 선언부(1행)의 arg1, arg2에 차례로 할당된다.

이렇게 전달된 값은 함수 내부로 전달되서 더해진 후에 반환된다.

return 값은 하나만 가질 수 있다.

함수를 정의 하는 다른 방법

자바스크립트는 함수를 정의하는 또 다른 방법을 제공한다.

다음 예제를 보자.

아래 방법은 함수를 정의 하는 또 다른 방법이다.

<script>
    var numbering = function (){
        i = 0;
        while(i < 10){
            document.write(i);
            i += 1;
        }   
    }
    numbering();
</script>

이렇게 되면 numbering이라는 변수안에 정의 한 함수를 넣는 것이고,

결국 numbering변수는 함수를 의미하게 되어

numbering()으로 함수를 호출 할 수 있게 되는 것이다.

위에서 사용했던 방법들과 모양은 다르지만, 의미는 거의 동일하다.

아래는 익명함수이다.

정의와 동시에 호출하는 것이며, 일회성 함수의 경우 사용한다!

함수는 코드의 재 활용성을 높여준다! 라는 것을 기억하자.

'Languages > Java Script' 카테고리의 다른 글

[Js] 객체 \| javascript 객체 \| 객체 지향 프로그래밍 (0)	2021.02.03
[Js] 배열 \| javascript 배열 \| 배열이란? (0)	2021.02.03
[Js] 반복문 \| javascript 반복문 \| 반복문 제어, 중첩 \| for,while (0)	2021.02.02
[Js] 조건문 \| javascript 조건문 \| Boolean \| 논리 연산자 (0)	2021.02.02

Contents

새소식

인기 검색어