JavaScript 요약정리 - 함수(선언적 함수,익명 함수),함수의 리턴, arguments 배열

안녕하세요

https://blog.naver.com/sysysy0302 여니입니다 :)

 

(+ 본 포스팅은 타 포스팅 자료를 참고자료로 링크를 달아두었습니다.)

 

 

[함수 (funtion)]

 

* 선언적 함수

        function 함수명(매개변수 , ...){
            해당 함수 호출시 실행할 소스코드;

            return 결과값;
    }
    - 매개변수가 없는 경우 생략 가능함
    - 반환할 값

ex)

<script>

        function getById(id){

            return document.getElementById(id);

        }

</script>

 

<h3 onclick="test1()">* 선언적 함수</h3>

<button onclick="test1();">실행확인</button>

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

   

<script>

        function test1(){

            const area1 = getById("area1");

            area1.innnerHTML += "test1()함수 실행<br>";

        }

</script>

 

 

* 익명 함수

        function(매개변수, 매개변수, ...){
            소스코드
        }
        특정 변수나 속성에 대입되는 함수 제시시 주로 사용됨(주로 이벤트 핸들러 작성시 사용)
    

ex)

<button id="btn2">실행확인</button>

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

    <script>

        const btn2 = getById("btn2");

        const area2 = getById("area2");

        btn2.onclick = function(){ // 이벤트 속성에 대입되는 function == 이벤트 핸들러

            area2.innerHTML += "이벤트 핸들러를 통해 실행됨<br>"

        }

        const sayHi = function(name){ // 함수 호이스팅이 발생하지 않음. 1회성 사용

            console.log(`${name}님 안녕하세요?`);

        }

        // sayHi("소연");

       

        function getById(id){ // 함수 호이스팅(선언적 방식으로 만들어진 함수는 script 최상단으로 먼저 이동함)

            return document.getElementById(id);

        }

    </script>

 

* 함수의 매개변수

ex)

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

        <button onclick="test3('안녕하세요')">실행</button>  // 문자

        <button onclick="test3(10)">실행</button> // 숫자

        <button onclick="test3([1,2,3])">실행</button> // 배열

        <button onclick="test3(true)">실행</button> // 문자

        <button onclick="test3(prompt('이름을 입력하세요'))">실행</button> // prompt

        <!-- 정의해둔 매개변수보다 더 많이 전달하는 것은 문제없다. 단, 초과시에 전달된 값은 무시됨. -->

        <button onclick="test3('안녕','반갑습니다.')">실행</button> // 여러개 문자

        <button onclick="test3(10,'안녕','반값습니다')">실행</button> // 문자와 숫자 동시에

        <button onclick="test3()">실행</button>

       

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

        <script>

            function test3(...value){ //매개변수 제시시 자료형 지정 x, const, let도 제시x => 변수명만 적음

            //  (value)만 입력시 매개변수의 요소 1개만 출력됨.

            //  (value ='기본값',...value2) 으로도 사용할 수 있다.

                const area3 = getById("area3");

                area3.innerHTML = value;

            }

        </script>

        <!-- 자바스크립트에서는 오버로딩 기능이 없다. 마지막 입력한 매개변수로 덮어 씌여짐 -->

 

* 매개변수 관련 arguments 배열

함수 호출시 전달되는 값은 내부적으로 arguments 배열에 담김
* arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열객체

ex)

<button onclick="test4(11, 12, 'dd', 5);">실행</button>

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

       

        <script>

            function test4(value){

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

                // arguments 배열의 모든 정수값을 더해서 area4 안에 출력

                let sum =0;

                let count=0;

                for(let i =0; i<arguments.length; i++){

                    if(typeof(arguments[i])=="number"){

                        sum += arguments[i];

                        count++;

                    }

                }

             // sum = undefined + 3; 이므로 명확하게 sum값 0으로 초기화

                const area4= getById("area4");

                area4.innerHTML += `총합 : ${sum}<br>`;

                area4.innerHTML += `평균 : ${sum/count}<br>`;

                area4.innerHTML += `랜덤값 : ${ran()}<br>`;

                // 총합 : xx <br>

                // 평균 : xx <br>

                // 랜덤값 : xx

            }

            // 1~100사이의 랜덤값을 구해서 반환

            function ran(){

                const test4 = getById("test4");

                return parseInt(Math.random()*100+1);

            }

        </script>

 

+ 참고 포스팅 

 

 

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

ex)

<button onclick="test5(this);">버튼1</button>

        <button onclick="test5(this.innerHTML);">버튼2</button>

        <button onclick="test5(this.id);" id="btn22">버튼22</button>

        <input type="button" value="버튼3" onclick="test5(this.value);">

       

       

        <script>

            const btn22 = getById("btn22");

            btn22.click();

            // click : 클릭해서 실행된 것과 같은 역할.

            /*

                Member m = new Member();

                m.setUserId("mkm");

               

                public void setUserId(String userId){

                    this.userId = userId;

                }

            */

            function test5(value){

                console.log(value);

            }

        </script>

 

* 함수의 리턴

* 일반적인 값 리턴

ex)

<button onclick="test6();">실행확인</button>

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

        <script>

            function test6(){

                // const area6 = getId("area6");

                getById("area6").innerHTML += `랜덤값 : ${ran()}<br>`;

            }

        </script>

 

* 익명 함수를 리턴하는 함수

ex)

<script>

            function test7(){

                const name = getById("userName").value;

                return function(){

                    alert(name + "님 환영합니다!!");

                }

            }

        </script>

 

 

+ 참고 포스팅