함수
함수는 자바스크립트 코드를 저장하고 function이라는 키워드를 이용하여 선언합니다. 출력문, 제어문 등의 코드를 저장하고 데이터를 반환합니다. 이처럼 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있습니다.
선언적 함수
함수를 사용하여 코드를 저장한 것을 선언적 함수라 합니다. 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다.
function 함수명( ){ 자바스크립트 코드; }
함수를 선언한 다음 호출하여 코드를 실행해보겠습니다.
<script>
var count = 0;
myFnc();
function myFnc(){
count++;
document.write("hello" + count, "<br>");
}
my fnc();
</script>
함수 호출문이 먼저 나와도 호이스팅 방식이 적용되어 정상적으로 함수를 호출합니다.
결과화면
hello2
익명 함수
익명 함수란 함수명이 없는 함수입니다. 다음과 같이 익명 함수를 선언하고 변수에 참조합니다.
참조 변수 = function( ){ 자바스크립트 코드; }
함수를 선언한 다음 호출하여 코드를 실행해보겠습니다.
<script>
var count = 0;
theFnc()
var theFnc = function(){
count++;
docnment.write("bye" + count, "<br>");
}
theFnc()
</script>
익명 함수는 호이스팅을 지원하지 않아 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올리지 못합니다.
결과화면
매개변수 함수
매개변수 함수는 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다.
이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 됩니다.
함수를 호출할 때 데이터 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점입니다.