자바스크립트

함수

우리는 앞에서 데이터를 저장할 때 변수를 선언하여 저장했습니다. 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있습니다.

선언적 함수

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

함수 정의문은 다음과 같이 선언합니다.

기본형

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

다음 예제는 함수 정의문과 익명 함수를 변수에 참조한 예입니다. 이렇게 두 가지 방식으로 함수를 선언한 다음 각각 호출하여 코드를 실행합니다.

<script>
    var count = 0;

    myFnc();

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

    myFnc();

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

    theFnc();
    </script>

익명 함수

자바스크립트의 익명 함수는 변수에 함수의 코드를 저장하는 대신 함수명을 사용하지 않습니다. 대신 변수명을 마치 함수명처럼 사용해서 함수를 호출하거나 변수값을 이동시키는데 사용할 수 있습니다.

아래 예제는 hello라는 변수명에 "Hello World!"라는 문자가 출력되는 함수 코드를 저장했습니다. hello()로 익명 함수를 호출하면, 소스코드가 실행됩니다.

<script>
    //익명 함수 선언 및 변수에 대입
    var hello = function()
    {
        document.write("Hello World!");
    };

    //익명 함수 변수명으로 호출
    hello();
</script>     //결과 Hello World!

매개변수 함수

기본 함수 정의문은 함수 안에 있는 코드를 실행할 때 단순히 함수명으로 호출해서 코드를 실행했습니다. 즉, 함수를 호출할 때 값을 전달할 수 없었습니다. 하지만 매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다. 이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 됩니다.

다음은 함수를 호출할 때 값을 전달하는 기본형입니다. 함수를 호출할 때 (a)데이터 1은 (1) 매개변수 1에 저장되고 (b) 데이터 2는 (2) 매개변수 2에 저장됩니다. 그리고 (c) 데이터는 (3) 매개변수 n에 저장됩니다.

기본형

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

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

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

    myFnc("홍당무", "서울");    //안녕하세요 홍당무입니다.
                                        //사는 곳은 서울입니다.
    myFnc("깍두기", "부산");    //안녕하세요 깍두기입니다.
                                        //사는 곳은 부산입니다.
</script>

리턴값 함수

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

다음은 return 문의 기본형입니다.

function 함수명(){
    
    자바스크립트 코드1;         //자바스크립트 코드1; - 2
    return 데이터(값);          //return 데이터(값); - 3

    자바스크립트 코드2;
}

var 변수 = 함수명();           //함수명(); - 1

//1 함수 호출문 → 2 함수 코드 실행 → 3 자바스크립트 코드2를 무시하고 데이터를 반환 → 1 함수 호출문 = 1에서 2로 2에서 3으로 3에서 1로 반복 되는 구조

다음의 기본 예제는 함수 호출과 함께 인자값 10, 20을 전달합니다. calc() 함수는 num1(10)과 num2(20)의 데이터를 더한 값인 30을 반환합니다. 반환된 값은 변수 result에 저장되어 화면에 출력 됩니다.

function sum(num1, num2) {
    return num1 + num2;     //return num1 + num2; - 2+3
}

var result = sum(10,20);    //result = sum(10, 20); - 1
document.write(result);

//1 함수 호출문 → 2 함수 코드 실행 → 3 30 반환 → 1 함수 호출문 = 1에서 2로 2에서 3으로 3에서 1로 반복 되는 구조

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

<script>
    function testAvg(arrData) {             //국어 - arrData[0], 영어 - arrData[1]  //arrData.length:2 //이 국어와 영어가 (arrData)에 들어감
        var sum = 0;
        for (var i = 0;i < arrData.length; i++) {
            sum + = Number(prompt(arrData[i] + "점수는?", "0"));        //배열에 저장된 데이터 개수(2)만큼 반복문을 실행합니다.
        }

        var avg = sum / arrData.length;         //평균 점수를 구해 반환합니다(바로 밑 라인까지 묶어서).
        return avg;
    }

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

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