호이스팅

"끌어올린다" 라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 것처럼 보이는 현상을 말한다.

단, 선언문만 해당되며 대입문은 끌어올려지지 않는다.
실제로는 컴파일 시 변수, 함수 선언이 메모리에 들어가되 할당은 코드를 작성한 위치에서 진행된다.

컴파일러는 자바스크립트 엔진이 인터프리팅(변수와 함수를 번역하는 과정)을 하기 전에 이 때, var a = 2;를 2개의 구문으로 본다 (선언과 초기화를 분리). 그 구문 중 선언에 해당하는 구문만 메모리 공간의 최상단으로 옮긴 것이다.

• var a
• a = 2

var a는 변수 선언문으로 컴파일을 할 때 처리하고, a=2는 실행할 때 까지 내버려둔다. 따라서 변수 a는 호이스팅이 되고 콘솔에는 다음과 같은 결과가 나온다.

자바스크립트에서는 ES6에서 도입된 let, const를 포함한 모든 선언을 호이스팅합니다.

undefined

함수 선언문의 경우도 호이스팅 된다.
단 함수 표현식은 정의된 함수를 변수에 할당하는 것이므로 호이스팅이 일어나지 않는다.\

func();
function func() {console.log('함수 호이스팅');}

주의할 점 ⚡️

1. 함수 표현식 (function expression)은 호이스팅 되지 않는다.
2. 함수와 변수 선언문 중에서는 함수 선언문이 먼저다.
3. let과 const로 선언한 변수도 호이스팅 대상이지만 var과 달리 호이스팅 시 undefined로 변수를 초기화하지 않는다. 따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다.

참고 :
커리어리 - 호이스팅