함수
함수란 프로그램의 코드를 저장한 공간이라고 할 수 있습니다. 데이터를 저장할 때는 변수를 선언하여 저장했습니다. 변수는 데이터만 저장할 수 있고 코드를 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 호출하여 사용할 수 있습니다.
변수와 함수의 차이점
변수(var) | 함수(function) |
---|---|
- 1개의 데이터만 저장합니다. - var 키워드를 이용하여 선언 - 문자형,데이터,논리형 등의 데이터를 보관합니다. |
- 자바스크립트 코드를 저장합니다. - function 키워드를 이용하여 선언합니다. - 출력문, 제어문등의 코드를 저장하고 데이터를 반환 |
선언적 함수
선언적 함수는 함수명이 있는 함수입니다. 따로 변수에 넣어주지 않고 선언할 때 붙여준 이름으로 호출합니다. 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다
function 함수명() {
자바스크립트 코드;
}
함수 호출
작성된 코드는 즉시 실행되지 않습니다. 함수는 메모리에 할당되어 있다가 함수가 호출되면 실행합니다.
<script>
var count = 0
function myFnc() {
count++;
document.write("hello"+count,"<br>");
}
myFnc(); //함수 호출
</script>
출력값: hello1
익명 함수
익명 함수는 함수명이 없는 함수 입니다. 변수에 함수를 넣어서 변수명으로 호출합니다.
참조 변수 = function(){
자바스크립트 코드;
}
<script>
var count = 0
var theFnc = function() {
count++;
document.write("bye"+count,"<br>");
}
theFnc();
</script>
출력값: bye1
매개변수 함수
매개변수 함수는 함수를 호출할 때 '전달하고자 하는 값을 입력'하여 호출합니다. (선언적 함수는 함수 안에 있는 코드를 실행할 때 함수명으로 호출해서 코드를 실행하기 때문에 함수를 호출할 때 값을 전달할 수 없습니다.)
function 함수명(매개변수1, 매개변수2,....매개변수n) {
자바스크립트 코드;
}
함수명(데이터1,데이터2...데이터 n);
<script>
function myFnc(name,area) {
document.write("안녕하세요"+name+"입니다.","<br>");
document.write("사는 곳은"+area+"입니다.","<br><br>");
}
myFnc("홍당무","서울");
myFnc("깍두기","부산");
</script>
출력값:
안녕하세요홍당무입니다.
사는 곳은서울입니다.
안녕하세요깍두기입니다.
사는 곳은부산입니다.
리턴값 함수
리턴값 함수(return문)은 함수를 호출 했을 때 결과값(date)를 반환합니다. 그리고 함수에서 return문이 실행되면 반복문의 break문과 비슷하게 코드가 강제로 종료됩니다.
function( ){
(2)자바스크립트 코드1;
(3)return데이터(값);
자바스크립트 코드2;
}
var 변수 = (1)함수명();
function sum(num1,num2) {
return num1 + num2; //(2)함수코드실행 + (3)30반환
}
var result = sum(10,20); //(1)함수 호출문
document.write(result); //출력값: 30
<script>
function testAvg(arrDate){
var sum = 0;
for(var i=0; i<arrDate.length; i++){
sum += Number(prompt(arrDate[i] + "점수는?","0")); //배열에 저장된 데이터개수(2)만큼 반복문 실행
}
var avg = sum / arrDate.length;
return avg;
} //평균 점수를 구해 반환합니다.
var arrSubject = ["국어","수학"];
var result = testAvg(arrSubject);
document.write("평균 점수는"+result+"점입니다.");
</script>
출력값: 평균 점수는(입력한 국어+수학 평균점)점입니다.
코드2