함수

함수에는 코드를 저장하고 필요할 때마다 호출해서 사용할 수 있다. function이라는 키워드를 이용해 선언하고 출력문, 제어문등의 코드를 저장하고 데이터를 반환한다.

선언적 함수

변수를 선언하고 함수에 코드를 저장할 수 있다. 함수에서는 function키워드로 변수를 선언하며 저장된 코드는 바로 실행되지 않고 함수를 호출해야 실행된다.

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

예제

<script>
    var count = 0;

    //함수 호출문이 먼저 나와도 호이스팅 방식이 적용되어 정상적으로 함수가 호출됨
    myFnc();    //hello1

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

    myFnc();    //hello2

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

    theFnc();   //bye3      
</script>

익명 함수

자바스크립트 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다. 익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론 (;) 을 대입한다. 익명 함수는 호출시 변수명을 함수명처럼 사용하면 된다.

기본형
참조 변수=function(){
   자바스크립트 코드;
} 
<script>
    let study = function(){
        document.write("javascript");
    }
    study();    //javascript
</script>

매개변수 함수

기본 함수에서는 코드를 실행할 때 함수명으로 호출해서 코드를 실행했다. 즉, 함수를 호출할 때 값을 전달할 수 없었다. 하지만 매개변수 함수는 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있다.

기본형
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 문은 함수에서 결괏값을 반환할 때 사용한다. 그리고 함수에서 return 문이 실행되면 반복문의 break 문과 비슷하게 코드가 종료된다.

기본형
function 함수명(){

   자바스크립트 코드1;
   return 데이터(값);

   자바스크립트 코드2;
}
var 변수 = 함수명(); //자바스크립트 코드1을 실행한 후 코드2를 무시하고 데이터를 반환

예제 1

<script>
    function testAvg(arrData){  //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>

예제 2

<script>
    var num = 1;
    function gallery(direct){
        if(direct){
            if(num == 8) return;
            num++
        } else {
            if(num == 1) return;
            num--;
        }

        var imgTag = document.getElementByld("photo");
        imgTag.setAttribute("src", "images/pic_" + num + ".jpg");
    }
</script>
</head>
<body>
    <div id= "galleryZone>
        <p><img src="images/pic_1.jpg" id="photo" alt=""></p>
        <p>
            <button onclick="gallery(0)>이전</button>
            <button onclick="gallery(1)>다음</button>
        </p> 
    </div>
</body>