함수

    함수는 자바스크립트 코드를 저장하고 function이라는 키워드를 이용하여 선언합니다. 출력문, 제어문 등의 코드를 저장하고 데이터를 반환합니다. 이처럼 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있습니다.

선언적 함수

    함수를 사용하여 코드를 저장한 것을 선언적 함수라 합니다. 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다.

function 함수명( ){
    자바스크립트 코드;
}

    함수를 선언한 다음 호출하여 코드를 실행해보겠습니다.

<script>
    var count = 0;

    myFnc();

    function myFnc(){
        count++;
        document.write("hello" + count, "<br>");
    }

    my fnc();

</script>

    함수 호출문이 먼저 나와도 호이스팅 방식이 적용되어 정상적으로 함수를 호출합니다.

결과화면

hello1
hello2

익명 함수

    익명 함수란 함수명이 없는 함수입니다. 다음과 같이 익명 함수를 선언하고 변수에 참조합니다.

참조 변수 = function( ){
                자바스크립트 코드;
            }

    함수를 선언한 다음 호출하여 코드를 실행해보겠습니다.

<script>
    var count = 0;

    theFnc()

    var theFnc = function(){
        count++;
        docnment.write("bye" + count, "<br>");
    }

    theFnc()

</script>

    익명 함수는 호이스팅을 지원하지 않아 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올리지 못합니다.

결과화면

bye1

매개변수 함수

    매개변수 함수는 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다. 이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 됩니다.
    함수를 호출할 때 데이터 1은 매개변수 1에 저장되고 데이터 2는 매개변수 2에 저장됩니다. 그리고 데이터 n은 매개변수 n에 저장됩니다.

function 함수명(매개변수 1, 매개변수 2, ... 매개변수 n){
    자바스크립트 코드;
}
합수명(데이터 1, 데이터 2,...데이터 n);

    함수를 호출했을 때 이름과 사는 지역의 데이터를 함수 정의문의 매개변수 name과 area에 각각 전달하여 함수 안에 있는 실행문의 매개변수에 저장된 데이터를 불러와 출력해보겠습니다.

<script>
    function myFnc(name, area) {
        document.write("안녕하세요" + name + "입니다", "<br>");
        document.write("사는 곳은" + area + "입니다", "<br><br>");
    }

    myFnc("홍당무","서울");

    myFnc("깍두기","부산");
</script>

결과화면

안녕하세요. 홍당무입니다.
사는 곳은 서울입니다.

안녕하세요. 깍두기입니다.
사는 곳은 부산입니다.


리턴값 함수

    return문은 함수에서 결과 값을 반환할 때 사용합니다. 그리고 함수에서 return문이 실행되면 반복문의 break 문과 비슷하게 코드가 강제로 종료됩니다. 다시 말해 함수 정의문에 return문이 사용되면 함수를 호출했을 때 결과 값(data)을 반환합니다.

function 함수명( ){

    자바스크립트 코드1;
    return 데이터(값);

    자바스크립트 코드2;
}

var 변수 = 함수명( );

    순서는 다음과 같습니다.
1. 함수 호출문 2. 함수 코드 실행 3. 자바스크립트 코드2를 무시하고 데이터를 반환


    다음은 함수 정의문 내에 작성한 코드를 실행한 후 계산된 결과 값을 return문으로 함수 호출문에 반환하는 것입니다.

<script>
    function testAvg(arrData){
        var sum = 0;
        for (var i = 0; i < arrData.length; i++){
            sum += Number(prompt(arrData[i] + "점수는?", "0"));
        }

        var avg = sum / arrData.length;
        return avg;
    }

    var arrSubject = ["국어", "수학"];
    var result = testAvg(arrSubject);

    document.write("평균 점수는" + result + "점입니다.");
</script>

결과화면

국어 점수는?
입력 : 80

수학 점수는?
입력 : 70

평균 점수는75점입니다.