자바스크립트

함수

변수에는 데이터만 저장할 수 있고 코드는 저장할 수 없습니다. 하지만 함수를 이용하면 코드를 저장했다가 필요할 때 마다 호출하여 사용할 수 있습니다. 코드를 저장하는 보관소라고 생각하면 됩니다. 그 보관소에서 필요한걸 꺼내서 출력하는것을 함수 호출이라고 합니다.

선언적 함수

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

이런 식으로 코드를 저장한 것을 함수 정의문이라고 합니다. 변수를 선언할 때 var이나 let, const 를 사용한 것 처럼 함수를 선언할 때는 function키워드를 사용합니다.

함수를 선언한 후 호출하려면 함수명(); 이렇게 호출합니다.

코딩해보세요

{
    var count = 0;

    myFnc();

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

    myFnc();

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

    theFnc();
}

결과
hello1
hello2
bye3

익명 함수

익명 함수는 함수 코드가 변수명에 저장된 형태이다. 따라서 변수값으로 구성된 함수 코드를 다른 변수명에 마치 변수를 대입하듯이 이동시킬 수 있습니다.

{
    const func = function ( ) { //함수를 변수로 지정. 
        document.write("함수가 실행되었습니다.");
    }
    func( );
}

매개변수 함수

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

기본적인 선언적 함수는 코드를 실행할 때 단순히 함수명으로 호출해서 사용했습니다. 하지만 함수명을 호출하여 사용하면 원하는 값 만을 전달하지 못하고 전체 함수가 실행됩니다.
하지만 매개변수가 있는 함수는 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다. 위의 기본형은 매개변수의 예제로, 데이터1 은 매개변수1에 저장되고 데이터n은 매개변수n에 저장됩니다.

코딩해보세요

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

    myFnc("홍당무", "서울");

    myFnc("깍두기", "부산");
}

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

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

아규먼트 함수

이건 나중에

리턴값 함수

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

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

위는 return값 함수의 기본형입니다. 함수에서 return문이 실행되면 반복문의 break와 비슷하게 코드가 강제로 종료됩니다.
return문이 사용되면 함수를 호출 했을 때 결과값을 바로 반환합니다.

평균점수구하기

{
    function testAvg(arrData){
        let sum = 0;

        for(let i=0; i<arrData.length; i++){
            sum += Number(prompt(arrData[i] + "점수는?", "0"));
        }
        let avg = sum/arrData.length;
        return avg;        
    }
    let arrSubject = ["국어", "수학"];
        
    let result = testAvg(arrSubject);

    document.write(result);
}

결과
국어 점수와 수학 점수를 차례로 입력하면 평균 점수의 값이 출력됩니다.

이미지예제

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

            let imgTag = document.getElementById("photo");
            imgtag.setAttribute("src", "../class/img/img0" + num + ".jpg");
        }
    </script>
</head>
<body>
    <div>
        <p><img src="../class/img/img01.jpg" id="photo" alt=""></p>
        <p>
            <button onclick="gallery(0)">이전</button>
            <button onclick="gallery(1)">다음</button>
        </p>
    </div>
</body>
}

총 8개의 이미지를 사용해서 갤러리를 만드는 예제입니다. 처음화면에는 img01.jpg가 나타납니다. 여기에서 다음 버튼을 누르면 img01,02,03...순서대로 나타납니다.
즉 이미지 파일명의 숫자가 1씩 증가되며 그림이 나타납니다. 이미지 넘버는 8번 까지만 있기때문에 9가 나오면 이미지를 불러올 수 없어 오류가 발생합니다.
8보다 큰 값이 나오는 경우 리턴문으로 함수를 종료하여 문제를 해결합니다.