호이스팅이란 무엇인가요?

호이스팅이란?

• 호이스팅이란 자바스크립트 엔진의 동작 매커니즘 중 하나로 변수, 함수, 클래스 선언을 코드 실행 전 최상단 스코프로 끌어올리는 것을 말합니다.
  • 이해를 위해 끌어올린다는 표현을 사용하였으나 실제로 각 식별자들을 인식하는 과정입니다.
• 단, 선언(declaration) 만 끌어올릴 뿐 초기화(initialization) 를 끌어올리지는 않습니다.

코드 예제

var 의 경우

console.log(message); //output : undefined
var message = "The variable Has been hoisted";

• 선언이 끌어올려져 undefined 를 출력하고 있습니다.

var message;
console.log(message);
message = "The variable Has been hoisted";

• 이 예는 사실상 위의 코드와 같은 동작을 한다고 보아도 됩니다.

function 의 경우

message("Good morning"); //Good morning

function message(name) {
  console.log(name);
}

• 함수에 대한 호이스팅은 함수를 선언하기 전 코드에서도 안전하게 함수를 불러올 수 있도록 도와줍니다.

let 혹은 const 의 경우

function foo() {
  console.log(bar); // Cannot access 'bar' before initialization
  let bar;
}

• 위 예에서는 함수는 이미 호이스팅에 의해 bar 가 선언되었다는 것을 알고 있지만, 초기화 전까지는 bar 를 출력하는 것이 불가능(TDZ)하여 초기화 전에 접근할 수 없다고 말하고 있습니다.

추가: 기본 개념을 넘어 호이스팅을 깊게 이해해보기

function hoist(x) {
  console.log(x);
  var x;
  console.log(x);
  var x = 2;
  console.log(x);
}

hoist(1);

• 위의 코드 결과를 예측해보자.
  • 1, 1, 2 를 출력하게 된다.
• 호이스팅은 단순히 식별자를 인식하는 과정이기 때문에 x 식별자가 존재한다는 사실만 가져간다.
  • 그래서 var x 는 아무런 역할을 하지 않게 된다.