javascript

함수

변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있습니다.

선언적 함수(기본 함수 정의문)

함수를 사용하여 코드를 저장한 것을 '함수 정의문'또는 '선언적 함수'라고 합니다 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다.

다음과 같이 선언합니다.

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

익명 함수

함수명이 없는 함수를 선언하고 변수에 참조해도 됩니다.

참조 변수=function(){
    자바스크립트 코드;
}

함수 정의문과 익명 함수를 변수에 참조한 예제입니다.

<script>
{
    var count = 0;
    
    function myFnc() {
        count++;                       //count = 1, count =2
        document.write("hello" + count);
    }                                       
    myFnc();      ------> hello1 실행
    myFnc();      ------> hello2 실행

    var theFun = function () {
        count++;                       //count = 3
        document.write("bye" + count);
    }
    theFun();     ------>bye3 실행
}
</script> 

매개변수 함수

기본 함수 정의문은 함수 안에 있는 코드르 실행할 때 단순히 함수명으로 호출해서 코드를 실행했습니다. 즉, 함수를 호출할 때 값을 전달할 수 없었습니다. 하지만 매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다. 이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 됩니다.

함수를 호출할 때 값을 전달하는 기본형입니다. 함수를 호출할 때 데이터1은 a에 저장되고 데이터2는 b에 저장, 그리고 데이터3은 c에 저장됩니다.

{
    function func(a, b, c) {                     //저장되어 있는 func의 값 데이터1,2,3을 각각 a,b,c에 저장
        document.write(a, c);                   // a(데이터1), c(데이터3) 실행
    }
    func("데이터1", "데이터2", "데이터3");    //func라는 함수명에 데이터1, 데이터2, 데이터3을 저장
}       //결과값 : 데이터1 데이터3

다음은 함수를 호출했을 때 이름과 사는 지역의 데이터르 함수 정의문의 매개변수 name과 area에 각각 전달하여 함수 안에 있는 실행문의 매개변수에 저장된 데이터를 불러와 출력하는 예제입니다.

<script>
{
    function func(name, area){
        document.write("안녕하세요" + area + "사는" + name + "입니다.");
    }
    func("조운섭","속초");
    func("조용환","부천");
}
</script> 

리턴값 함수

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

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

    자바스크립트 코드2;
}
var 변수 = 함수명();

다음 기본 예제는 함수 호출과 함께 인자값10, 20, 30, 40을 전달합니다. a(10)와 d(40)의 데이터를 더한 값인 50을 반환합니다. 반환된 값은 변수 result에 저장되어 화면에 출력됩니다.

<script>
{
    function func(a, b, c, d){
    return a + d;
}
let result = func(10, 20, 30, 40);
document.write(result);
}
</script> 

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

<script>
{
    function testAvg(adt) {
        var sum = 0;
        for (var i = 0; i < adt.length; i++) {
            sum += Number(prompt(adt[i] + "점수는?", "0"));
        }       //0   =   90    msg   국어 i=0         입력:70
                //70  =   80    msg   수학 i=1         입력:70
        var aver = sum / adt.length;   //총점수  / 2 
            //  85    //170 나누기 2
        return aver; //85

    }
    var asb = ["국어", "수학"];
    var result = testAvg(asb);
        //85
    document.write("평균점수는" + result + "점입니다.");
}
</script> 

함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라 합니다. 재귀 함수 호출은 반복문처럼 여러 번 호출하기 위해 사용하며 기본형은 다음과 같습니다.

function myfunc(){
    자바스크립트 코드;
    myfunc();
}
myfunc();

다음은 재귀 함수 호풀을 적용하여 1부터 10까지의 값을 출력하는 예제입니다.

<script>
{
    let num = 0;

    function func() {
        num++;
        document.write(num);
        if (num == 10) return;
        func();
    }
    func();
}
</script>