[JavaScript] 함수는 1급 객체이다.

1급 객체

"함수는 1급 객체이다." or "First Citizen" 이라는 말이 있다.

함수형 언어에서 볼 수 있는 특징이다.(swift, python 등)

함수를 객체처럼 취급한다.

함수를 값(데이터)으로 사용할 수 있다.

 

함수가 데이터라면

1. 함수를 변수나 데이터 구조를 담을 수 있다.(저장)

2. 함수를 매개변수를 전달할 수 있다.

3. 함수를 반환값으로 사용할 수 있다.

 

 

JavaScript에서 함수를 선언하는 방법

1. 함수 선언문

    <script>
        function m1() {
            alert('함수 선언문');
        }

        m1();
    </script>

2. 함수 표현식(리터럴) == 익명 함수

    <script>
        let f2 = function () {
            alert('익명 함수');
        }

        f2();   //호출

    </script>

 

함수를 변수나 데이터 구조를 담을 수 있다.(저장)

단계 1.

 

    <script>
        function m3() {
            alert('m3');
        }

        let f3;

        f3 = m3;    //함수를 변수에 저장할 수 있다.

        m3();   // 호출 1
        f3();   // 호출 2
    </script>

 

 

 

    <script>
        /*
        function m4() {
            alert('m4');
        }
        */
        let f4;

        f4 = function m4() {    
            alert('m4');
        }

        f4();
        // m4();   //m4 is not defined

    </script>

 

m4를 인식하지못해 원래 이름이 필요없어진다.

 

    <script>
        /*
        function m4() {
            alert('m4');
        }
        */
        let f4;

        f4 = function {    
            alert('m4');
        }

        f4();
        // m4();   //m4 is not defined

    </script>

 

 

 

 

흔히 볼 수 있는 상황

    <script>
        document.getElementById('btn1').onclick = p1;

        function p1() {
            alert('p1');
        }

        p1();

    </script>

p1은 btn1의 클릭 이벤트 전용함수 인데 클릭이 아닌 곳에서 호출도 가능하여 원래의 의도와 맞지않게 사용될 수 있다.

 

 

    <script>
        document.getElementById('btn1').onmousedown = p1;

        function p1() {
            alert('btn1 >' + event.buttons);
        }

        p1();

    </script>

event

 

이벤트 프로퍼티에 바로 대입
 1. 가독성이 향상된다.

2. 잘못된 의도로 사용될 가능성이 적어진다.

    <script>
        document.getElementById('btn2').onclick = function () {
            alert('p2');
        };

        document.getElementById('btn2').onclick();  //호출
    </script>

 

 

    <script>
        document.getElementById('btn3').addEventListener('click', p3);

        function p3() {
            alert();
        }
    </script>

★★★★★

    <script>
        document.getElementById('btn4').addEventListener('click', function() {
            alert();
        });
    </script>

    <script>
        setTimeout(function() {
            alert('setTimeout');
        }, 1000);
    </script>

 

 

 

함수를 매개변수를 전달할 수 있다.

    <script>
        function m5() {
            alert('m5');
        }

        function m6(aaa) {
            aaa();
        }

        // m6(m5);

        m6(function() {
            alert('익명');
        });

    </script>

 

 

함수를 반환값으로 사용할 수 있다.

    <script>
        function m7() {
            alert('m7');
        }

        function m8() {
            return m7;
        }
        /*
        let temp = m8();
        temp();
        */
        m8()();
    </script>