함수
함수는 프로그램이 있어 가장 중요한 영역입니다. 함수는 실행문을 저장하여 사용할 수 있으며, 함수의 형태는 다양하기 때문에 다양한 함수의 사용방법을 익히고 해석 할 수 있어야 합니다.
변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때 마다 호출하여 사용할 수 있습니다.
선언적 함수
함수를 사용하여 코드를 저장한 것을 '함수 정의문'이라고 합니다. 변수를 선언할때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다.
function 함수명( ){
자바스크립트 코드;
}
익명 함수
익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다. 익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론 ; 을 대입한다. 익명 함수는 호출 시 변수명을 함수명처럼 사용하면 된다.
참조 변수 = 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>
매개변수 함수
선언적 함수는 함수 안에 있는 코드를 실행할때 단순히 함수명으로 호출해서 코드는 실행했습니다. 즉, 함수를 호출할 때 값을 전달할 수 없었습니다. 하지만 매개변수 함수는 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다.
다음은 함수를 호출할 때 값을 전달하는 기본형 입니다. 함수를 호출할 때 a 는 데이터1은 1매개변수 1에 저장되고 b데이터 2는 2매개변수 2에 저장됩니다. 그리고 c데이터는 3매개변수 n에 저장됩니다.
function 함수명(매개변수 1, 매개변수2,... 매개변수n){
자바스크립트 코드;
}
함수명(데이터1(a), 데이터2(b)...데이터n(c));
다음은 함수를 호출했을 때 이름과 사는 지역의 데이터를 함수 정의문의 매개변수 name과 area에 각각 전달하여 함수 안에 있는 실행문의 매개변수에 저장된 데이터를 불러와 출력하는 예제입니다.
06: <script>
07: function myFnc(name,area){
08: document.write("안녕하세요." + name + "입니다.",<br>");
09: document.write("사는곳은" + area + "입니다.",<br><br>");
10: }
11:
12: myFnc("홍당무","서울");
13:
14: myFnc("깍두기","부산");
15:</script>
결과 화면
안녕하세요. 홍당무입니다.
사는곳은 서울입니다.
안녕하세요.깍두기입니다.
사는곳은 부산입니다.
리턴값 함수
함수에서 결괏값을 반환할 때 사용합니다. 그리고 함수에서 return 문이 실행되면 반복문의 break 문과 비슷하게 코드가 강제로 종료 됩니다. 다시 말해 함수 정의문에 return 문이 사용되면 함수를 호출했을 때 결괏값(data)을 반환합니다.
function 함수명 (){
자바스크립트 코드1; *2
return 데이터(값;) *3
자바스크립트 코드2;
}
var 변수 = 함수명(); *1
*1 함수 호출문> 2*함수 코드 실행> 3*자바스크리브 코드2를 무시하고 데이터를 반환
다음은 함수 정의문 내에 작성한 코드를 실행한 후 계산된 결괏값을 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:</script>
함수를 호출하면 데이터가 매개변수에 전달되며 함수에 작성한 코드에 사용됩니다. 그리고 계산결과를 return 문을 사용해 함수를 호출한 지점에 되돌려주면 result에 값이 저장됩니다.