[자바스크립트] Hoisting 호이스팅이란?

호이스팅

호의가 계속되면 둘리인줄 안다.

인터프리터가 코드 실행 전에 함수, 변수, 클래스, import 선언문이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 메커니즘을 뜻합니다. 

실제로 선언문의 위치를 이동시키는 것이 아니라 컴파일 단계에서 선언을 먼저 등록하기 때문에 발생하는 현상입니다. 

변수 호이스팅

let, const로 선언된 변수는 호이스팅은 되나 ※일시적 사각지대 TDZ에 있으므로 선언 이전에 접근할 수 없습니다.

console.log(num); // undefined
var num = 7;

그와 달리 var로 선언된 변수는 초기화 없이 undefined를 값으로 호이스팅 됩니다. 

console.log(num); // ReferenceError: Cannot access 'num' before initialization
let num = 12;

함수 호이스팅

함수 선언문은 완전한 형태로 호이스팅 되기 때문에 선언 전에 호출이 가능합니다.

getUser(); // "user1"
function getUser() {
  console.log("user1");
}

하지만 예외로 화살표 함수는 호이스팅 영향을 받아 선언 전에 호출이 불가능합니다. 선언 전 호출하면 TypeError가 발생합니다.

getUser(); // TypeError: getUser is not a function
const getUser = () => {
  console.log("user1");
}

클래스 호이스팅

클래스는 선언만 호이스팅되고 초기화되지는 않습니다. 선언 전에 접근 시 ReferenceError가 발생합니다.

const newMember = new Member();
// ReferenceError: Cannot access 'Member' before initialization

class Member {
  constructor() {
    this.name = "Jinyoung";
  }
}

 

※ 일시적 사각지대

let, const, class로 선언된 변수는 변수 스코프 시작부터 해당 변수가 선언 및 초기화 완료 시점까지 일시적 사각지대 Temporal Dead Zone(TDZ)에 있다고 표현합니다. 변수를 초기화 전에 접근 시도할 경우 ReferenceError가 발생합니다.

 

 

하트를 눌러주면 주인장이 뿌듯해합니다.