호이스팅

우선 호이스팅에 대해 알아보기 전에 코드를 잠깐 보자

console.log(hello)

var hello;

이 코드의 실행결과는 어떻게 될까???

 

처음 이 코드를 봤을 때는 당연히 참조에러가 나는거 아니야?? 라고 생각했다..ㅎ

하지만 undefined가 출력된다!!

아직은 잘 이해가 안되겠지만 이게 호이스팅이다..

 

자바 스크립트는 인터프리터에 의해 한줄씩 순차적으로 실행되는 구조이다.

이때 자바스크립트 엔진은 소스코드를 한 줄 씩 순차적으로 실행하기에 앞서 평과 과정을 거치며 코드를 실행하기 위한 준비를한다!

 

즉, 자바스크립트 엔진은 소스코드를 두개의 과정,  평가 , 실행으로 나누어 처리한다

 

평가

자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(클래스, 함수, 변수 등)을 먼저 찾아 실행한다.

 

실행

평가과정이 끝나면 선언문을 제외한 나머지 소스코드를 한 줄 씩 순적으로 실행한다!

 

위의 코드처럼 변수 선언문이 코드의 맨 위로 올라간것처럼 동작하는것이 자바스크립트 고유의 특징인 변수 호이스팅이라고한다!

 

 

그런데 호이스팅 시 변수 및 함수 선언문이 물리적으로 코드의 최상단으로 옮겨지는걸까??

답은 아니다

호이스팅 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 동일한 부분에 코드가 위치한다!

 

당연한 소리지만 자바스크립트는 초기화가 아닌 선언만 끌어올린다. 

var x=2;
console.log(x+" "+y);
var y=2;

위 코드의 실행결과는 어떻게 될까??

 

당연히 '2 undefined' 가 출력된다. 

var y =2  전체를 호이스팅 하는것이 아닌 var y; 즉, 선언만 호이스팅 해준다! 

 

끝~

 

 

 

 

참고

yoon1fe.github.io/2021/01/25/Hoisting.html

gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html