[JS] 익명 함수

    반응형

    * 개인적인 공부 내용을 기록하는 용도로 작성한 글 이기에 잘못된 내용을 포함하고 있을 수 있습니다.

    * 지속적으로 내용을 추가해 나갈 예정이며 지적은 언제나 환영합니다.

     

    [JS] 함수 선언문 에서 함수 선언문 (Function Statement) 방식을 이용해 함수를 선언하는 방법에 대해 정리했다.

    이번 포스팅 에서는 함수 표현식 방법중 익명 함수를 이용해 함수를 선언 및 실행 하는 방법에 대해 정리 하고자 한다.

     

    # 익명 함수

    호이스팅

    사용이유

    정리


    # 익명 함수

    JavaScript는 함수를 다른 언어와 달리 "특별한 종류의 값"으로 취급한다. 따라서 JS에서는 함수를 변수에 대입할 수 있다.

    익명 함수란, 단어 뜻 그대로 이름이 없는 함수함수를 재사용할 필요가 없을 때 사용하는 함수이다. 익명 함수는 변수에 대입하는 방식으로 사용한다.

    익명함수의 기본형은 다음과 같다. 이 때 익명 함수는 "값" 이기에, 함수 선언문 방식과 달리 끝에 세미콜론(;)을 붙여 주어야 한다.

    [기본형]
    var/let/const 변수명 = function(매개변수, ..) {
    	실행문;
        };

    다음은 hello 변수에 "Hello, JS"를 출력하는 익명함수를 대입한 후, 변수명을 이용해 익명함수를 호출한 예제이다.

    let hello = function() {document.write("Hello, JS")};
    hello();
    [실행결과] Hello, JS

    익명함수는 다른 변수에 대입하거나 또 다른 함수의 매개변수로 사용 가능하다.

    let hello = function() {document.write("Hello, JS")};
    let another = hello;
    another();
    [실행결과] Hello, JS

    호이스팅

    그렇다면 일반 함수(함수 선언문 방식을 이용한 함수)와 익명 함수는 어떤 차이가 있는 것일까?

    우선, 익명 함수는 일반 함수와 달리 호이스팅이 일어나지 않는다. 호이스팅에 대해 간단하게 설명하자면, 함수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것 처럼 해석하는 것이다.

    아래 코드를 살펴보자. hello는 함수 선언문 방식으로 선언된 일반 함수 이므로, 호이스팅이 발생한다. 따라서 JS는 hello 함수의 선언과 초기화를 분리하여 선언을 해당 블록 최상단으로 옮겨서 해석한다. 그렇기에 함수 선언 이전에 함수를 사용해도 에러 메시지가 발생하지 않는다.

    hello("Hello, JS!");
    function hello(text) { document.write(text); }

     

    function hello(); // hoisting
    hello("Hello, JS!");
    function hello(text) { document.write(text); }

    이번에는 같은 코드를 익명 함수 방식으로 작성해 보았다. 익명 함수는 호이스팅이 발생하지 않기에, 함수 선언 이전에 함수를 호출하니 함수가 선언되지 않았다는 경고 메시지가 출력된다.

    hello2("Hello, JS!");
    let hello2 = function(text) { document.write(text); }
    VM1970:1 Uncaught ReferenceError: hello2 is not defined
        at <anonymous>:1:1

    함수 호출부를 익명함수 뒤로 옮기니 정상적으로 작동한다.

    let hello2 = function(text) { document.write(text); }
    hello2("Hello, JS!");
    [실행결과] Hello, JS!

    사용이유

    JavaScript 내에서 단 한번만 사용하는 함수는 일반 함수가 아닌 익명 함수로 사용하는 것이 좋다. 앞에서 설명했듯이, 일반 함수는 호이스팅이 발생하기에 항상 메모리를 차지하고 있어야 한다. 하지만 한 번 사용을 위해서 메모리를 잡고 있는 것은 매우 비효율 적이다. 따라서 재사용이 필요 없는 함수의 경우 익명 함수로 구현하여 불필요하게 메모리를 낭비하지 않도록 하는 것이 좋다!


    정리

    일반 함수는 호이스팅의 영향을 받지만, 익명 함수는 영향을 받지 않는다.

    단 한번만 사용하는 함수의 경우에 익명 함수로 구현하여 메모리 낭비를 최소화하자!


    반응형

    댓글

    Designed by JB FACTORY