[Javascript] 함수 선언문과 함수 표현식, 그리고 호이스팅

자바스크립트에서 함수를 선언하는 방법은 2가지가 있다.

1. 함수 선언문

function myFunc(){
	// do something...
}

2. 함수 표현식

const myFunc2 = function(){
	// do something...
};

두 가지 표현 모두 다 호출하는 방식은 동일하다.

myFunc();
myFunc2();

 

두 선언방식의 차이점

함수 선언문은 이른바 호이스팅(hoisting)이라는 자바스크립트의 고유한 특성에 영향을 받는다.

호이스팅?

hoisting : 끌어 올리기; 들어올려 나르기.  (네이버 영어사전)

호이스팅은 무언가를 끌어 올린다는 뜻이다.

자바스크립트에서 코드가 실행될때 의미상 특정 코드가 위로 끌어 올려지게 된다.

호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다. - mdn

코드는 위에서 아래로 실행된다.

그런데 코드가 위로 끌어 올려지게 되면?

당연히 그 코드부터 실행시킨다.

foo();
foo2();

function foo() {
	console.log('this is foo');
}

const foo2 = function(){
	console.log('this is foo2');
}

// 함수를 선언도 하기전에 함수를 실행시키면 그 결과는 어떻게 될까?

함수 선언문으로 작성한 함수는 함수 호출보다 뒤에 있어도 실행이 되는것을 볼 수 있다. ( 'this is foo' )

반면 함수 선언문으로 작성한 함수는 참조에러가 나는것을 볼수가 있다.

나는 따로 호이스팅을 고려하지 않아도 되는 함수 표현식을 선호하는 편이다. 

 

참고

Hoisting

호이스팅(hoisting)은 ECMAScript® 2015 언어 명세 및 그 이전 표준 명세에서 사용된 적이 없는 용어입니다. 호이스팅은 JavaScript에서 실행 콘텍스트(특히 생성 및 실행 단계)가 어떻게 동작하는가에 대한 일반적인 생각으로 여겨집니다. 하지만 호이스팅은 오해로 이어질 수 있습니다.

developer.mozilla.org