[JavaScript] 익명 함수와 선언적 함수

익명 함수와 선언적 함수

---

익명 함수

 익명함수는 말그대로 이름이 없는 함수이다. 따라서 익명함수를 선언하고 사용하기 위해서는 변수에 넣어서 사용하여야 한다.

    <script>
        function () {
            //실행코드 작성
        };
    </script>

 익명함수는 위와 같은 형태로 만들어 준다. 그리고 사용하기 위해서는 아래와 같이 변수에 넣어서 그 변수이름으로 호출하면 된다.

    <script>
        var func = function () {
            alert('This is anonymous function');
        };
        func();
    </script>

선언적 함수

선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말한다. 즉, 따로 변수에 넣어주지 않고 선언할 대 붙여준 이름으로 호출하면 된다.

    <script>
        function 함수이름 () {
            // 실행코드 작성
        }
        함수이름();
    </script>

선언적 함수와 익명 함수의 차이

자바스크립트에서 함수를 선언하는 방법은 위에서 설명한대로 익명 함수와 선언적 함수로 선언하는 방법 두가지 이다.

둘 다 함수를 생성하는 방법이지만, 차이는 있다.

그 차이는 웹부라우저가 script 태그 내부의 내용을 위에서 부터 한줄 씩 읽기 전에 선언적 함수부터 먼저 읽는다는 것이다.

아래의 코드를 실행하면 오류가 발생한다.

    <script>
        func();
        var func = function () {alert('function A')};
        var func = function () {alert('function B')};
    </script>

이 코드가 오류가 나는 이유는 웹브라우저는 코드를 읽을 때 위에서 부터 한줄씩 차례로 읽는데,

익명함수를 저장한 변수를 선언하기 이전에 그 변수를 사용했기 때문이다.

하지만 다음 코드는 오류가 나지 않는다.

    <script>
        func();
        function func() {alert('function A')};
        function func() {alert('function B')};
    </script>

이 코드가 오류가 나지 않는 이유는 앞에서 설명햇듯이 웹브라우저가 코드를 읽을 때는 위에서 부터 차례로 읽기는 하나,

그 전에 선언적 함수 가 있으면 그 코드부터 먼저 읽은 뒤에 차례로 읽어 나가기 때문이다.

따라서, 선언적 함수는 웹브라우저가 가장 먼저 읽고, 익명함수는 그 뒤에 코드를 차례로 읽을 때 읽는다.