[Javascript] function 선언문 / 표현식 차이

// 함수 선언문
function square(number) {
  return number * number;
}

// 함수 표현식
var square = function(number) {
  return number * number;
};

위와 같은 function을 많이 봤을 것이다.

 

하지만 둘의 차이점을 제대로 모르는 상태에서 무분별하게 사용하는 경우가 많다.

 

이들은 동작 방식에 차이가 있다.

 

// 함수 선언문
var res = square(5);

function square(number) {
  return number * number;
}

 

함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화하고 이를 VO(variable object)에 저장한다. 즉, 함수 선언, 초기화, 할당이 한번에 이루어진다. 그렇기 때문에 함수 선언의 위치와는 상관없이 소스 내 어느 곳에서든지 호출이 가능하다.

 

// 함수 표현식
var res = square(5); // TypeError: square is not a function

var square = function(number) {
  return number * number;
}

 

함수 선언문의 경우와는 달리 TypeError가 발생하였다. 

함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생한다.

변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행된다. 호이스팅된 변수는 undefined로 초기화 되고 실제값의 할당은 할당문에서 이루어진다.

 

 

 

언뜻보면 함수 선언문이 좋아보일 수는 있겠지만

 

JavaScript: The Good Parts의 저자이며 자바스크립트의 권위자인 더글러스 크락포드(Douglas Crockford)는 이와 같은 문제 때문에 함수 표현식만을 사용할 것을 권고하고 있다.

 

 - 함수 호이스팅이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하므로

    코드의 구조를 엉성하게 만들 수 있다고 지적

 - 대규모 애플리케이션을 개발하는 경우 인터프리터가 너무 많은 코드를 변수 객체(VO)에 저장하므로

    애플리케이션의 응답속도는 현저히 떨어질 수 있으므로 주의