호이스팅

장석원·2024년 7월 24일

호이스팅이란

"끌어올린다" 라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상
주의점은 "선언문"만 올려지며 "대입문"은 끌어올려지지 않는다.

실행 컨텍스트 생성 시 렉시컬 스코프 내의 선언이 끌어올려 지는 게 호이스팅이다.

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

컴파일러는 자바스크립트 엔진이 인터프리팅을 하기 전에 컴파일을 하는데 이 때, var a = 2; 를 2개의 구문으로 본다.

  • var a
  • a = 2

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

undefined;

var는 선언, 초기화가 동시에 이루어지기 때문에 undefined를 출력하지만 let,const는 선언단계만 호이스팅 되기 떄문에 Reference Error를 출력합니다.

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

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

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

결론:
호이스팅은 스코프 내의 선언을 해당 스코프의 최상단으로 끌어올린 것 처럼 보이는 현상을 말한다.
자바스크립트 엔진은 런터임 이전에 실행 컨텍스트에 식별자의 정보를 등록하기 때문에 일어나는 현상이다.

출처: https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/hoisting.md

0개의 댓글