호이스팅(Hoisting)이 뭐야?

호이스팅(Hoisting)

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

컴파일러는 자바스크립트 엔진이 인터프리팅을 하기전에 컴파일을 한다.

- 인터프리팅(Interpreting) : 컴파일과 다르게 소스 코드를 한 번에 읽어서 번역하지 않고, 런타임 상태의 소스코드를 한 줄 한 줄 번역하면서 프로그램을 구동하는 방식이다. 한 줄씩 번역한 코드가 바로 기계어가 되는 것은 아니고 중간 코드(intermediate code)로 번역된다. 이 중간 코드는 다른 프로그램에 의해 기계어로 번역되어 실행된다.

 

예를 들어보자

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

컴파일 단계에서 자바스크립트 엔진은 이를 2개의 구문으로 확인한다.

var a
a = 2

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

undefined;

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

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

foo();
foo2();

// 함수 선언문
function foo() {
  console.log('hello')
}
// 결과 : hello

// 함수 표현식
var foo2 = function() {
  console.log('bye')
}
// 결과 : TypeError : foo2 is not a function

함수 표현식은 호이스팅 되지 않는다.
이때 TypeError 가 나오는 이유는 var = foo2 에 의해 undefined로 지정되었기 때문이다. 즉, 함수로 인식되지 않고 있음을 의미한다.

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

GitHub - Esoolgnah/Frontend-Interview-Questions: 프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️

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

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog