hoisting

자바스크립트에서 변수가 선언될 때 변수 선언부는 함수 스코프의 최상단으로 끌어올려지고, 이때 변수 값에는 undefined가 대입된다. 이와 같은 끌어올림 덕분에 자바스크립트에서는 함수 어디에서나 변수에 항상 접근할 수 있다. 하지만 변수에 초기 값을 대입하기 전까지 변수는 undefined가 된다.

즉, 아래와 같은 코드를 작성하고 실행하면 v는 undefined라고 뜬다. 

                                                     

이는 자바스크립트 엔진에서 변수를 함수 상단으로 끌어올렸기 때문이다.(선언만 할 뿐 지역변수를 초기화 하지는 않는다.)

이러한 자바스크립트에서의 끌어올림의 비밀은 자바스크립트 엔진이 스코프에 진입할 때 코드를 두 단계로 처리하는데 있다. 첫번째 단계에서 자바스크립트 엔진은 변수를 초기화하고, 두 번째 단계에서는 실제 코드를 실행한다.

자바스크립트 엔진이 코드를 처리하는 과정은 다음과 같다.

< 첫 번째 단계 >

1. 함수 인자를 선언하고 초기화한다.

2. 지역 변수에 대입된 익명 함수를 비롯해 지역 변수를 선언하지만, 이들 변수를 초기화하지는 않는다.

3. 함수를 선언하고 초기화한다.

< 두 번째 단계 >

자바스크립트를 실행하고 지역 변수의 값을 정의한다.

첫 번째 단계에서 2, 3번에 대한 예를 좀 자세히 들어보면 다음과 같다.

자바스크립트는 코드를 실행하기 전에 함수 선언문을 먼저 해석하고 먼저 실행컨텍스트에 추가한다. 그래서 어디서 코드를 실행하든 항상 함수가 정의된 듯 동작한다. 

여기서 주의할 점은 '함수 표현식'으로 정의된 함수는 hoist되지 않는다. '함수 선언문'만 hoist된다.

함수 표현식은 아래와 같이 함수를 선언하는 것인데, 자바스크립트가 첫 번째 실행 때 var funcExpression;으로 선언만 할뿐 초기화를 하지 않는다.

따라서 아래와 같은 코드에서 funcExpression(2,3)은 실행할 수 없다.