자바스크립트

함수

선언적 함수

함수를 사용하여 코드를 저장한 것을 '함수 정의문' 이라고 합니다. 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다. 기본형은 다음과 같습니다.

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

정의되어 있는 함수를 실행하는 기본형은 다음과 같습니다.

함수명();
또는 참조 변수(); // 익명함수일 경우

다음 예제는 함수 정의문과 익명 함수를 변수에 참조한 예입니다. 이렇게 두 가지 방식으로 함수를 선언한 다음 각각 호출하여 코드를 실행합니다.

<script>
    var count = 0;
    myFnc();

    function myFnc(){
        count++;
        document.write("hello" + count, "<br>");
    }

    myFnc();

    var theFnc = function(){
        count++;
        document.write("bye" + count , "<br>");
    }

    theFnc();
</script>


결과:
hello1
hello2
bye3

익명 함수

익명 함수는 함수명이 없는 함수선언으로 참조변수를 함수의 이름처럼 사용하여 호출할 수 있습니다. 또한, 호이스팅을 지원하지 않아 반드시 선언과 정의 이후에 참조해야 합니다.

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

익명함수의 예제는 위의 함수 예제에서 인용하였습니다.

<script>
    var count = 0;

    var theFnc = function(){
        count++;
        document.write("bye" + count , "<br>");
    }

    theFnc();
</script>


결과:
bye1

매개변수 함수

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

다음은 매개변수 함수의 기본형입니다.

function 함수명(매개변수1, 매개변수2) {
    자바스크립트 코드;
}
함수명(데이터1, 데이터2);

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

<script>
    function myFnc(name area){
        document.write("안녕하세요 " + name + "입니다." , "<br>");
        document.write("사는 곳은 " + name + "입니다." , "<br><br>");
    }

    myFnc("홍당무","서울");
    myFnc("깍두기","부산");
</script>


결과:
안녕하세요 홍당무입니다.
사는 곳은 서울입니다.

안녕하세요 깍두기입니다.
사는 곳은 부산입니다.

다음은 질의응답 창을 통해 방문자의 아이디와 비밀번호를 입력받아 만일 잘못된 아이디가 입력된 경우에는 "존재하지 않는 아이디입니다." 라는 경고 창을 나타대고, 잘못된 비밀번호가 입력된 경우에는 "잘못된 비밀번호입니다." 라는 경고 창을 나타냅니다. 아이디와 비밀번호가 일치하면 환영 문구가 출력됩니다.

<script>
    var rightId = "korea";
    var rightPw = "1234";
    function login(id, pw){
        if(id == rightId){
            if (pw == rightPw){
                document.write(id + "님 방문을 환영합니다.");
            }
            else alert("잘못된 비밀번호입니다.");
        }
        else alert('존재하지 않는 아이디입니다.');
    }

    var userId = prompt("아이디를 입력하세요","");
    var userPw = prompt("비밀번호를 입력하세요","");

    login(userId,userPw);
</script>


결과:
ID, PW : korea, 1234일 때
korea님 방문을 환영합니다.

리턴값 함수

리턴값 함수는 return값을 undefined가 아닌 다른 값으로 명시해놓은 함수입니다. 명시하지 않을 시 default값은 undefined입니다.

return문의 기본형입니다.

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

다음 예제는 함수 호출과 함께 인자값 10, 20을 전달합니다. calc()함수는 이 두 값을 더한 값인 30을 반환합니다. 반환된 값은 변수 result에 저장되어 화면에 출력됩니다.

<script>
    function calc(num1, num2){
        return num1 + num2;
    }
    var result = calc(10,20);
    document.write(result);
</script>


결과:
30

다음은 함수 정의문 내에 작성한 코드를 실행한 후 계산된 결괏값을 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 점입니다.