Hoisting

호이스팅이란?

• 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것을 말한다.
• 물리적으로 코드를 끌어올리는 것은 아니다.
• JS엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다.
• JS엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, function 등)을 스코프에 등록한다.
• 호이스팅으로 인해 이미 변수선언/함수선언을 한 것으로 취급되어 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다.

var, let, const의 호이스팅

• var로 선언한 변수는 선언문보다 먼저 참조해도 에러가 나지 않는 반면 let과 const는 참조에러(Reference Error)가 발생한다.
• 이는 let, const로 선언한 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone)에 빠지기 떄문이다.
• var로 선언한 변수는 호이스팅으로 인해 선언과 함께 undefined로 값이 초기화되면서 메모리에 저장된다. 그러나 let과 const는 초기화는 되지않고 선언만 메모리에 저장된다. 초기화되지 않은 변수는 참조할 수 없으므로 참조에러가 발생한다.

let foo=1;
{
    console.log(foo);
    let foo=2;
}
//error

위의 예제에서 만약 블럭내부에서 foo의 호이스팅이 일어나지 않았다면 에러가 발생하지 않고 console.log(foo);는 한단계 위의 전역scope에서 foo값을 읽어와서 1을 출력했을 것이다.

let foo=2;는 블럭내부에서 호이스팅이 되었지만 초기화되지 않았기 때문에 참조에러가 발생한다.

 

함수 표현식

변수 선언문에 해당하는 흐름. 따라서 실행문의 위치와 함수를 대입하는 구문의 위치가 중요.

d();
var d = function () {  //함수 표현식
	console.log('d');
};
d();

//d는 함수가 아니라는 에러 발생

함수 선언식

선언식으로 작성된 함수는 항상 최상위로 Hoisting 되어 실행문의 순서가 중요하지 않다.

j();
function j (){  //함수 선언식
	console.log('j');
};
j();
//결과:
//j
//j