JavaScript 07. 함수

함수(function)

함수의 종류 :  선언적 함수 / 익명함수 

* 선언적 함수 

  function 함수명(매개변수,매개변수,..){
        해당 함수 호출시 실행할 소스코드;}
            
        [return 결과값;]
    };

* 익명함수 

 변수|속성 = function([매개변수,...]){
        해당 함수 호출시 실행할 소스코드;

        [return 결과값;]
    };
    -> 특정 변수나 속성에 대입되는 함수 제시시 주로 사용됨 
        (주로 이벤트 핸들러 작성시 사용)

 <button id="btn">실행확인</button>
    <div id="area2" class="area"></div>
    
    <script>
        const btn = document.getElementById("btn");
        btn.onclick = function(){// 이벤트 속성에 대입되는 function == 이벤트핸들러 
            document.getElementById("area2").innerHTML += "이벤트 핸들러를 통해서 실행됨<br>";
        } 

        window.onload = function(){
            document.getElementById("area2").innerHTML += "페이지 로딩 직후에 실행됨<br>";
        }
    </script>

---

함수의 매개변수  : 매개변수 제시시 자료형 지정하지않음, 선언구문X => 변수명만 지정 

- 정의 해둔 매개변수 갯수보다 더 많이 전달하는 것 가능하지만 초과된 전달값은 무시됨
- 정의해둔 매개변수 갯수보다 더 적게 전달하는 것 가능 ( 오류 안남) 

 <button onclick="test2('안녕하세요');">실행확인</button>
    <button onclick="test2(10);">실행확인</button>
    <button onclick="test2([1,2,3]);">실행확인</button>
    <button onclick="test2(true);">실행확인</button>

    <br>
    <button onclick="test2(prompt('이름을 입력해주세요'));">실행확인</button>
    <button onclick="test2('안녕하세요','반갑습니다');">실행확인</button>
    <button onclick="test2(10,true,'안녕');">실행확인</button>
    <button onclick="test2();">실행확인</button>


    <div id="area3" class="area"></div>
    <script>
        function test2(value){
            document.getElementById("area3").innerHTML = value;
        }
    </script>

 

---

 

매개변수 관련 arguments배열 

- 함수 호출시 전달되는 값들은 내부적으로 arguments배열에 담김

arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열 객체 

 <button onclick="test3(11,12,1,5,7);">실행확인</button>
    <div id="area4" class="area"></div>

    <script>
        function test3(){   
            const divEl = document.getElementById("area4");

            let sum = 0;
            for(let i=0;i<arguments.length;i++){
                sum += arguments[i];
            }
            divEl.innerHTML += "총합 : " + sum + "<br>";
            divEl.innerHTML += "평균 : " + sum/arguments.length + "<br>"
        }
    </script>

---

매개변수에 this관련 전달하기 
- this :  현재(이벤트가 발생한) 요소객체

<button onclick="test5(this)">클릭</button>
    <button onclick="test5(this)">클릭</button>

    <script>
        function test5(el){
            el.innerHTML = "클릭됨";
            el.style.backgroundColor ="red";
        
        }
    </script>

---

함수의 return

* 일반적인 값 리턴

 <script>
        //1~100사이의 랜덤값 구해서 반환시켜주는 함수 만들기 
        function ran(){
            return parseInt(Math.random()*100 +1)

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

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

 

* 익명함수를 리턴

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

    <script>
        function test7(){
            const inputEl = document.getElementById("userName");
            return function(){
                alert(inputEl.value);
            };
        }
        (function(){//익명함수 강제 호출 
            document.getElementById("userName").value = "ㅋㅋㅋ";

        })();
    </script>

이름 :