[JavaScript] 호이스팅(Hoisting)

호이스팅(Hoisting)이란?

자바스크립트 엔진(Interpreter)이 코드를 실행하기 전,

변수, 함수, 클래스의 선언문을 위로 끌어 올리는 것을 말한다.

변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮긴다.

 

함수 호이스팅

함수의 호이스팅은 함수의 선언문 전에 호출이 가능하게 해준다.
따라서 함수의 선언문은 선언 이전에도 호출이 가능하다.

print();

function print() {
  console.log('Good Morning🌤️');
}

 

 

변수와 클래스 호이스팅

 

변수(let, const)와 클래스는 선언만 호이스팅이 되고, 초기화는 호이스팅이 되지 않는다.

따라서 아래와 같이 초기화 전에 변수에 접근하면 컴파일(빌드) 에러가 발생한다.

error "Cannot access (변수명 또는 클래스명) before initialization" = '아직 변수(또는 클래스)가 초기화가 되지 않았어'

console.log(hi); // 에러 발생
let hi = 'hi';

const car = new Car(); // 에러 발생
class Car {}

 

아래 코드도 역시 에러가 발생한다.

블록 안에서 x가 호이스팅 되어 존재하긴 하지만, 

블록 안에 있는 그 x가 초기화가 되지 않았으므로 'Cannot access 'x' before initializion' 에러한다.

let x = 1;
{
  console.log(x); // 에러 발생
  let x = 2;
}