호이스팅(Hoisting)

호이스팅에 대한 정리 중... 일단 끄적이기

실행컨텍스트도 정리해야함. 호이스팅보다 먼저오게해야지

 

 

호이스팅이란?

Hoisting 의 사전적 정의는 끌어올리기, 들어올려 나르기이다.

 

먼저 코드를 보자.

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

위 코드는 자바스크립트에서 문제없이 동작한다. 그 이유는 이 포스트의 주제인 호이스팅때문이다.

자바스크립트에서의 호이스팅은 var 선언문이나 혹은 function 선언문 등 모든 선언문이 해당 Scope 의 최상단으로 끌어올려진 것처럼 동작하는 특성을 일컫는다. 즉, 자바스크립트에서의 모든 선언문은 선언되기 이전에 참조가 가능하다.

 

이러한 동작을 하는 이유는 변수 선언부터 이해해야한다. 변수 선언은 총 3단계로 이뤄진다.

 

선언 단계(Declaration phase)
=> 변수 객체(Variable Object)에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.

초기화 단계(Initialization phase)
=> 변수 객체(Variable Object)에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화된다.

할당 단계(Assignment phase)
=> undefined로 초기화된 변수에 실제값을 할당한다.

 

다시 코드를 가져와 위의 예제를 다시 정리해보자면 

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

위의 코드와 같이 변형되어 동작하는 것처럼 보일 것이다.

즉, a 라는 변수는 선언단계와 초기화단계를 거치기때문에 2번째 줄의 console.log 에서 undefined 가 출력될 것이다. 이후 3번째 줄에서 할당 단계를 거칠 것이고 변수 a 에는 100이란 값이 할당되어 4번째 줄의 console.log 에서 100 을 출력할 것이다.

 

 

참고

https://poiemaweb.com/js-data-type-variable#24-%EB%B3%80%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85variable-hoisting