호이스팅

호이스팅

이 개념은 선수지식으로 스코프를 알고 있어야 된다.

 

호이스팅이란?

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

즉, 선언문이 어디에서 선언됐든 속하는 스코프 전체에서 존재하는 것처럼 취급되는 작용을 말한다.

주의할 점은 "선언문" 이며, "대입문"은 끌어올려지지 않는다.

console.log(a);
var a = 2;

컴파일러는 JS엔진이 *인터프리팅(Interpreting)을 하기 전에 컴파일을 하는데

이때, var a = 2; 를 2개의 구문으로 본다.

* = 인터프리팅은 기계어를 기계어를 다른 언어로 번역할 필요 없이 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경

var a

a = 2

var a 는 변수 선언문으로 컴파일 할 때 처리하고, a = 2 는 실행할 때까지 내버려둔다.

따라서, 변수 a는 호이스팅 되고 콘솔에는 undefined가 출력된다.

var a;
console.log(a);
a = 2;

이 순서에서 a에는 값 할당이 되기 전이기 때문에 undefined가 출력된다.

 

함수 선언문의 경우도 호이스팅된다.

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

함수 호이스팅

 

하지만, 주의할 점은 함수 표현식은 호이스팅 되지 않는다.

func();
var func = function() {}

변수 func의 호이스팅이 발생해서 참조할 수는 있기 때문에 ReferenceError가 발생하지 않지만
그 값이 undefined이기 때문에 TypeError가 발생한다.

 

그리고 두번째로 주의할 점은 함수와 변수 선언문 중에는 함수 선언문이 먼저 호이스팅 된다.

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

동일한 이름으로 함수와 변수 선언문(= 함수 표현식)이 있지만, 함수 선언문의 호이스팅이 먼저이기 때문에 결과는 다음과 같다.

함수 호이스팅