JavaScript 함수

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

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

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

1.3 함수의 정의와 호출
: 함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다.
소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다. 인자는 생략 할 수 있다. 함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.

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

결과

: numbering();을 통해서 numbering()함수를 호출해서 출력한 것이다.

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

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

<script type="text/javascript">
    function get_member1() {
        return 'sungju';
    }
    alert(get_member1());
</script>

결과

: return은 결과를 반환하는 것 외에 함수를 중지시키는 역할도 한다. 하나의 함수에 return값이 여러개가 있더라도 제일 처음에 있는 return값만 반환해주고 함수는 종료되기 때문에 이후에 return은 무시된다.

1.5 인자
: 인자(argument)는 함수로 유입되는 입력 값을 의미하는데, 어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있다.

<script type="text/javascript">
    function get_argument(arg) {
        return arg*1000;
    }
    alert(get_argument(1));
</script>

결과

: get_argument(1));을 통해서 1이라는 인자(argument)값을 함수 get_argument(arg)로 넘겨주게 되면 arg매개변수(parameter)를 통해 1이라는 값을 받아 return해서 돌려줄때는 arg*1000이라는 연산된 값을 돌려주게 된다.

1.6 복수인자
: 여러개의 입력 값을 받고 싶다면 복수의 인자를 사용하면 된다. 단 return값은 하나만 돌려 받을 수 있다.

<script type="text/javascript">
    function get_argument(arg1, arg2) {
        return arg1 + arg2;
    }
    alert(get_argument(10, 20));
</script>

결과

: 복수의 인자값을 복수의 매개변수로 넘겨 받아서 연산된 값을 return으로 돌려주게 된다.

1.7 함수의 다양한 정의 방법

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

1.7.1 익명함수

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