[JavaScript] 자바스크립트 함수 선언식 vs 함수 표현식 차이 이해하기

[JavaScript] 자바스크립트 함수 표현식(function expressions) 이해하기에서 함수 표현식에 대해서 살펴봤었는데, 그렇다면 함수 선언식(Function Declaration)과 함수 표현식(Function Expression) 사이에는 어떤 차이가 있는지 살펴보자.

 

 

차이 1 : 문법

가장 당연하고 우선된 둘의 차이는 문법의 차이다.

 

함수 선언식

함수 선언식은 일반적인 함수 선언을 말한다. 

함수 선언식은 아래와 같은 문법으로 선언하고 호출할 수 있다.

// 함수 선언문
function sayHi() {
    console.log('Hi!');
}

// 함수 호출
sayHi();

사실상 함수 선언문이라고 부르는 게 맞을 것이다. 

하지만 함수 표현식과 비교를 하다보니 함수 선언문을 함수 선언식이라고도 부르는 것 같다. 

 

함수 표현식

함수 표현식 포스팅에서 정리했었지만, 간단하게 요약하면 익명 함수를 값으로써 변수에 할당한 표현식을 함수 표현식이라고 한다.

함수 표현식은 아래와 같은 문법으로 선언하고 호출할 수 있다.

// 함수 선언문
let sayHello = function () {
    console.log('Hello!');
}

// 함수 호출
sayHello();

 

 

 

차이 2 : 스코프

두번째 차이는 스코프의 차이다.

[JavaScript] 자바스크립트 스코프(scope) 가볍게 이해하기에서 마지막 부분에 잠깐 정리했었는데, var변수와 함수 선언문은 함수 스코프(function scope)를 가지고 let과 const 변수는 블록 스코프(block scope)를 가진다. 

 

함수 선언문

따라서, 함수 선언문은 함수 스코프를 가진다.

{
    function sayHi() {
      console.log('Hi!');
    }
}

sayHi();

위 코드처럼 블록문 안에 함수를 선언해도 블록문 밖에서 아무렇지 않게 호출이 된다. 

function myFunction() {
    function sayHello () {
      console.log('Hello!');
    }
    
    sayHello();
}

myFunction();
sayHello(); // Error

하지만 위 코드처럼 함수 안에서 함수를 선언하고, 가장 바깥에서 sayHello 함수를 호출하면 Error가 발생한다.

 

함수 표현식

함수 표현식은 어떤 키워드로 선언한 변수에 할당하는지에 따라 스코프가 달라진다.

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

sayHello();

위 코드 처럼 var변수에 함수를 할당할 경우에는 함수 스코프를 가진다.

{
  let sayHello = function () {
    console.log('Hello!');
  }
}

sayHello(); // Error

반면에 let, const변수에 함수를 할당할 경우에는 블록 스코프를 가지게 된다.

 

 

차이 3 : 호이스팅

함수 선언문과 함수 표현식의 세 번째 차이는 호이스팅이다. 

결론부터 말하자면, 함수 선언문은 호이스팅이 일어나고 함수 표현식은 호이스팅이 일어나지 않는다.

[JavaScript] 자바스크립트 호이스팅(Hoisting) 가볍게 이해하기에서 정리했듯이 호이스팅이란 선언문 자체가 해당 스코프의 최상위로 올려지는 현상이다.

다시 말하면 호이스팅은 '선언문'만 끌어올리기 때문에 함수 선언문과, 함수 표현식은 호이스팅의 차이가 있는 것이다.

 

함수 선언문

sayHi();

function sayHi() {
  console.log('Hi!');
}

위 코드는 콘솔에 Hi! 를 출력한다. 함수 선언문으로 작성된 sayHi함수의 선언문이 호이스팅되었기 때문이다. 

 

함수 표현식

sayHello(); // Error

let sayHello = function () {
  console.log('Hello!');
}

함수 표현식의 경우에는 호이스팅이 일어나지 않기 때문에 이 경우 Uncaught ReferenceError: Cannot access 'sayHello' before initialization라는 에러를 만나게 된다.

 

 

마무리

함수 표현식과 함수 선언식. 둘 중에 어느 것 하나가 항상 우월하다고 말할 수는 없다고 생각한다. 그저 이 둘의 차이를 명확하게 이해하고 구분해서 상황에 따라, 필요에 따라 적절하게 활용하는 것이 좋겠다.