함수

함수란 프로그램의 코드를 저장한 공간이라고 할 수 있습니다. 데이터를 저장할 때는 변수를 선언하여 저장했습니다. 변수는 데이터만 저장할 수 있고 코드를 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 호출하여 사용할 수 있습니다.

변수와 함수의 차이점

변수(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)함수명();
(1)함수 호출문 -> (2)함수 코드 실행 -> (3)자바스크립트 코드2를 무시하고 데이터를 반환 -> 이하 반복
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
박스