[JavaScript] 함수 표현식 / 함수 선언식

안녕하세요. J4J입니다.

 

이번 포스팅은 함수 표현식과 함수 선언식에 대해 적어보는 시간을 가져보려고 합니다.

 

 

함수 표현식

 

함수 표현식이란 함수를 정의할 때 자바스크립트 변수에 정의된 함수들을 저장하는 것을 의미합니다.

 

예를 들어 다음 코드들처럼 let, const, var와 같은 자바스크립트 변수에 함수를 생성하여 저장하는 방식이 함수 표현식입니다.

 

<script>
    const funcA = function() {
        console.log('funcA!');
    }

    var funcB = function() {
        console.log('funcB!');
    }

    funcA();
    funcB();
</script>

 

 

함수 선언식

 

함수 선언식은 function 키워드 옆에 함수 명을 지정하여 함수를 정의하는 방식입니다.

 

예를 들어 다음 코드들처럼 함수를 생성하는 것들이 함수 선언식을 이용한 방식입니다.

 

<script>
    function funcA() {
        console.log('funcA!');
    }

    function funcB() {
        console.log('funcB!');
    }

    funcA();
    funcB();
</script>

 

 

반응형

 

 

차이점

 

우선 함수 표현식과 함수 선언식은 모두 함수를 정의할 때 사용한다는 공통점을 가지고 있습니다.

 

하지만 그와 달리 차이점들도 존재합니다.

 

제가 알고 있는 차이점은 다음과 같이 2가지가 있습니다.

 

• 호이스팅 (Hoisting)
• 화살표 함수 (Arrow Function)

 

 

우선 호이스팅에 대해 말씀드리겠습니다.

 

호이스팅이라고 하는 것은 변수와 함수를 선언할 때 블럭 또는 함수를 기준으로 하여 최상단으로 변수와 함수들을 끌어올리는 것을 의미합니다.

 

이런 호이스팅에서 표현식과 선언식에서 서로 다른 결과가 일어납니다.

 

우선 다음의 예시를 보도록 하겠습니다.

 

<script>
    funcA(); // funcA!
    funcB(); // Uncaught ReferenceError: Cannot access 'funcB' before initialization

    function funcA() {
        console.log('funcA!');
    }

    let funcB = function() {
        console.log('funcB!');
    }
</script>

 

 

코드를 보면 선언식으로 함수를 정의한 funcA는 정상적으로 실행되지만 표현식으로 함수를 정의한 funcB는 에러가 발생됩니다.

 

왜냐하면 호이스팅에 의해 자바스크립트에서는 위의 코드가 다음 코드와 동일하게 동작되고 funcB 같은 경우는 실제 함수가 정의된 위치에 도달하기 전에 실행하게 되면 아직 함수로 인식되지 않기 때문입니다.

 

<script>
    function funcA() { // 함수 호이스팅
        console.log('funcA!');
    }

    let funcB; // 변수 호이스팅

    funcA(); // funcA!
    funcB(); // Uncaught ReferenceError: Cannot access 'funcB' before initialization

    // funcA가 있던 자리

    funcB = function() {
        console.log('funcB!');
    }
</script>

 

 

728x90

 

 

그다음 차이점은 화살표 함수입니다.

 

일반적으로 화살표 함수는 함수를 정의할 때 코드를 줄여 간편하게 함수를 생성하기 위해 사용됩니다.

 

하지만 이런 화살표 함수는 표현식에서는 사용이 가능하지만 선언식에서는 사용이 불가합니다.

 

다음과 같은 코드가 있다고 가정해보겠습니다.

 

<script>
    function funcA() {
        return 'funcA!';
    }

    let funcB = function() {
        return 'funcB!';
    }

    console.log(funcA());
    console.log(funcB());
</script>

 

 

여기서 funcB함수를 화살표 함수를 이용하여 코드를 리팩토링 하면 다음과 같은 코드를 만들 수가 있습니다.

 

<script>
    function funcA() {
        return 'funcA!';
    }

    let funcB = () => 'funcB!'; // 화살표 함수 이용

    console.log(funcA());
    console.log(funcB());
</script>

 

 

이와 같이 함수 선언식에서는 불가능하지만 함수 표현식에서는 화살표 함수를 이용하여 코드를 간단하게 만들 수 있게 됩니다.

 

 

 

 

 

이상으로 함수 표현식과 함수 선언식에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.