JavaScript(함수)

함수(function)

함수의 기본 형태

function 함수명(매개변수, 매개변수, . . . . ){

            해당함수 호출시 실행할 소스코드;

 

 

            return 결과값;

}

 

• 매개변수가 없는경우 매개변수 생략 가능
• 반환값이 없을경우 반환값(return)도 생략 가능

---

함수 관련 실습

 

• 매개변수와 return값이 생략된 모습

<button onclick="test1();">확인</button>
    <div id="area1" class="area"></div>

    <script>
        function test1(){
            document.getElementById("area1").innerHTML+="test1()함수 실행됨 <br>"
        }
    </script>

 

• 매개변수가 전달되는 함수의 모습

<h2>함수의 매개변수</h2>

    <!-- button[onclick=]{확인}*8 -->
    <button onclick="test3('매개변수 전달');">확인</button>
    <button onclick="test3(10);">확인</button>
    <button onclick="test3([1,2,3]);">확인</button>
    <button onclick="test3(true);">확인</button>
    <br>
    <button onclick="test3(prompt('점심메뉴를 입력하세요'));">확인</button>
    <button onclick="test3('된장찌개','김치찌개');">확인</button>
    <!--정의해둔 매개변수 개수보다 더 많이 전달되면 오류는 나지 않지만 초과된 전달값은 무시된다.-->
    <button onclick="test3(15,'비빔밥','날씨맑음');">확인</button>
    <button onclick="test3();">확인</button>
    <!--정의해둔 매개변수 개수보다 적게 전달되어도 오류는 나지 않지만 undefined-->

    <div id="area3" class="area"></div>

    <script>
        function test3(value){ //매개변수 제시시 자료형 지정하지 않고 변수명만 적는다.

            document.getElementById("area3").innerHTML = value;
        }
    </script>

 

---

• 함수 호출 시 전달되는 값은 내부적으로 arguments 배열에 담긴다.
• arguments는 모든 함수마다 내부적으로 하나씩 존재하는 배열 객체를 뜻한다.

<h3>매개변수 관련 arguments배열</h3>
    <p>
        함수 호출 시 전달되는 값은 내부적으로 arguments배열에 담긴다. <br>
        * arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열 객체
    </p>

    <button onclick="test4(5,4,3,2,1);">확인</button>
    <div id="area4" class="area"></div>

    <script>
        function test4(){

            // console.log(arguments);
            // console.log(arguments[0]);

            var sum=0;
            for(var i=0; i<arguments.length; i++){
                sum+=arguments[i];
            }

            document.getElementById("area4").innerHTML+="총합 : "+sum+"<br>";
            document.getElementById("area4").innerHTML+="평균 : "+sum/arguments.length+"<br>";
        }
    </script>

 

• 매개변수 있는 함수에 this 관련 전달하기

<h3>매개변수 있는 함수에 this 관련 전달하기</h3>

    <button onclick="test5(this);">버튼1</button>
    <button onclick="test5(this.innerHTML);">버튼2</button>
    <button value="벨류버튼3" onclick="test5(this.value);">버튼3</button>
    <button id="btn4" onclick="test5(this.id);">버튼4</button>

    <script>
        function test5(a){
            console.log(a);
        }
    </script>

---

• 함수의 리턴
• 일반적인 값 리턴하는 함수의 모습

<h2>함수의 리턴</h2>
    <h3>일반적인 값 리턴</h3>

    <button onclick="test6();">확인</button>
    <div id="area5" class="area"></div>

    <script>
        function test6(){
            document.getElementById("area5").innerHTML+="랜덤값 : "+ran()+"<br>";
        }

        //1~100사이의 랜덤값 구해서 반환해주는 함수 만들기
        function ran(){
            let random = parseInt((Math.random()*100+1));

            return random;
        }
    </script>

    <h3>익명함수를 리턴하는 함수</h3>

    이름 : <input type="text" id="userName">
    <button onclick="test7()();">확인</button>

    <script>
        function test7(){
            var name = document.getElementById("userName").value;

            console.log(name);

            return function(){
                alert(name+"님 반갑습니다.");
            }
        }
    </script>