함수 표현식과 함수 선언식의 차이

이 글 간단 요약

호이스팅 영향 여부 차이 함수 선언식은 호이스팅의 영향을 받고, 표현식은 영향을 받지 않는다.

declareFn();
representativeFn();

function declareFn() {
  console.log('declare FN');
}

var representativeFn = function() {
  console.log('this is not called with hoisting');
};

VM401:5 declare FN
VM401:2 Uncaught TypeError: representativeFn is not a function
    at <anonymous>:2:1

호이스팅?

인터프리터가 JS 코드 해석할 때 Global 영역에 선언된 코드 블럭을 최상의 Scope로 끌어올리는 것.

Global 영역에 선언된 변수 또는 함수는 JS 엔진이 가장 먼저 해석한다. 하지만 할당 구문은 런타임 과정에서 이뤄지기 때문에 hoisting 되지 않는다.(실행 컨텍스트를 생각하면 된다.)

편하게 선언문은 JS 엔진 구동시 가장 최우선으로 해석 된다고 이해하자. 즉, 인터프리터는 JS 코드 해석하면서 코드 작성 순서에 상관없이 global 영역에 선언된 변수나 함수 선언문을 먼저 수집한다. 그래서 전역객체의 속성으로 등록 시킨다. 이래서 전역변수와 전역함수는 JS 코드의 어떠한 위치에서도 실행 가능하다.

hoisting에서 중요한 건 statement는 hoisting 되지만 할당은 hoisting 되지 않는다는 점 이다. 이 statement는 런타임 이전에 미리 해석되어진다. (할당은 실행 컨텍스트 동작을 떠올리자. 런타임 시점에 이뤄진다. ) 즉 {} 안의 내용은 포함하지만 = 연산자를 사용한 값은 hoisting 되지 않는다. (위 예제 코드를 얘기하는 것이다.)

위 코드는 declareFn() 실행코드를 해석하기 전에 declareFn 함수에 대한 선언이 hoisting 되어 global 객체에 등록되기 때문에 오류 없이 수행된다. 하지만 함수 표현식은 변수에 함수 리터럴을 할당 하기 때문에 hoisting 되지 않고 syntax error 발생한다.

그래서 hoisting은 JS 코드 해석에 혼란을 야기하므로, 항상 최상위에서 작성할 것을 권고한다.

Summary

Q. 함수 선언식과 표현식의 차이는? A. 1. 호이스팅 여부 2. 함수 선언식은 함수 리터럴 형식. 함수 표현식은 함수를 변수에 할당하는 방법.

Q. 호이스팅이란? A. 인터프리터가 JS 코드 해석시에 Global 영역에 선언된 코드 블럭을 최상위 Scope로 끌어올리는 것. 즉, Global 영역에 선언된 변수 함수는 JS 엔진이 가장 먼저 해석한다. 할당 구문은 런타임 과정에서 이뤄지기 때문에 호이스팅 되지 않는다. 이 때, 함수 선언문 도 JS 엔진이 가장 먼저 해석한다. 함수표현식은 런타임시 해석된다. 이러한 이유 때문에 호이스팅은 최상위에서 작성되는 것이 권장된다. 코드 해석에 혼란을 일으키지 않기 위해..