자바스크립트

함수

함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다.

선언적 함수

변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다.

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

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

함수 정의문({...})안에 작성된 코드는 즉시 실행되지 않습니다. 함수는 메모리에 할당되어 대기하고 있다가 함수가 호출되면 실행됩니다. 정의되어 있는 함수를 호출하는 기본형은 다음과 같습니다.

함수명();
또는 참조 변수();

익명 함수

자바스크립트 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식입니다. 익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론(;)을 대입합니다. 익명 함수는 호출 시 변수명을 함수명처럼 사용하면 됩니다.

기본형은 다음과 같습니다.

var 변수명 = function( 매개변수 )
    {
        실행문;
    };

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

06:    <script>
07:     var count = 0;     
08:     
09:     myFnc();                // 함수 호출문이 먼저 나와도 호이스팅 방식이 적용
10:                                     정상적으로 함수를 호출합니다.
11:     function myFnc() {    
12:         count++;
13:         document.write("hello" + count, "<br>");
14:     }
15:        
16:     myFnc();    
17:     
18:     var theFnc = function() {    
19:         count++;
20:         document.write("bye" + count, "<br>");
21:     }
22:        
23:     theFnc();    
24:     </script>

매개변수 함수

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

다음은 함수를 호출할 때 값을 전달하는 기본형입니다.

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

다음 예제는 질의응답 창(prompt)을 통해 방문자의 아이디와 비밀번호를 입력받아 만일 잘못된 아이디가 입력된 경우에는 "존재하지 않는 아이디입니다." 라는 경고 창을 나타내고, 잘못된 비밀번호가 작성된 경우에는 "잘못된 비밀번호입니다."라는 경고 창을 나타냅니다. 아이디와 비밀번호가 일치하면 환영 문구가 출력됩니다.

06:    <script>
07:     var rightId = "korea";
08:     var rightPw = "1234";
09:     function login(id, pw) {
10:         if (id == rightId) {
11:             if (pw == rightPw) {
12:                 document.write(id + "님 방문을 환영합니다.");
13:             } else {
14:                 alert("잘못된 비밀번호입니다.");
15:             }
16:
17:             } else {
18:                 alert("존재하지 않는 아이디입니다.");
19:             }
20:         }
21:            
22:     var userId = prompt("아이디를 입력하세요.", "")
23:     var userPw = prompt("패스워드를 입력하세요.", "")
24:            
25:     login(userId, userPw);
26:     </script>

리턴값 함수

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

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

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

    자바스크립트 코드2;
}

var 변수명 = 함수명();

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

06:    <script>
07:     function testAvg(arrData) {
08:         var sum = 0;
09:         for (var i = 0; i < arrData.length; i++) {
10:             sum += Number(prompt(arrData[i] + " 점수는?", "0"));
11:         }
12:
13:         var avg = sum / arrData.length;
14:         return avg;
15:     }
16:
17:         var arrSubject = ["국어", "수학"];
18:         var result = testAvg(arrSubject);
19:
20:         document.write("평균 점수는 " + result + "점입니다");
21:
22:     </script>