호이스팅 Hoisting

Hoist, 감아올리기. 

코드가 실행되기 전에 var, let, const 등으로 정의된 변수나 함수선언문, 함수표현식이 끌어올려지는 것.

 

사실 이런 은유보다 실제로 무슨 일이 일어나는지 보면 훨씬 쉽다.

 

---

변수는 3단계에 걸쳐 생성된다. 자세한 내용은 실행 콘텍스트Execution Context을 참조하기 바란다.

 

1) 선언 단계(Declaration phase)

변수를 실행 컨텍스트의 변수 객체(Variable Object)에 등록한다.

이 변수 객체는 스코프가 참조하는 대상이 된다.

 

2) 초기화 단계(Initialization phase)

변수 객체(Variable Object)에 등록된 변수를 위한 공간을 메모리에 확보한다.

이 단계에서 변수는 undefined로 초기화된다.

 

3)할당 단계(Assignment phase)

undefined로 초기화된 변수에 실제 값을 할당한다.

 

var 키워드로 선언된 변수는 1) 선언 단계와 2) 초기화 단계가 한번에 이루어진다. 

즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화(초기화 단계)한다.

따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다.

다만 undefined를 반환한다.

이후 변수 할당문에 도달하면 비로소 값이 할당된다.

이러한 현상을 변수 호이스팅(Variable Hoisting)이라 한다.

 

쉽게 말하면, 코드 실행 콘텍스트에서 해당 영역에서 변수나 함수 이름이 메모리에 먼저 들어가는 현상이다.

 

var 뿐만 아니라 let과 const에도 호이스팅은 발생하긴 한다고 한다.

하지만 let과 const는 "엑세스를 할 수 없어(?)" 레퍼런스 에러, TDZ(Temporal Dead Zone)이 발생한다.

 

---

var

a) 일반적인 경우

var a = '날 끌어올려줘'
console.log(a) // 날 끌어올려줘 출력

 

b) 호이스팅 발생 : 변수가 정의되지 않았으므로 Reference Error가 발생해야 하지만, undefined가 출력.

console.log(a); // undefined
var a = '날 끌어올려줘';

 

 

---

var, let, const 비교

var a = '원래 얘가 출력되어야 할텐데';

(function() {
  console.log(a); // undefined
  var a = '날 끌어올려 줘';
}());

 

새로운 function 실행명령에 의해 a가 호이스팅되며 undefined로 재정의된다.

풀어쓰면 이런 형태다.

 

var a = '원래 얘가 출력되어야 할텐데';

(function() {
  var a;
  
  console.log(a); // undefined
  a = '날 끌어올려 줘';
}());

 

let이나 const의 경우는 Reference Error가 발생한다.

const a = '얘가 출력되어야 할텐데';

(function() {
  console.log(a); // ReferenceError
  const a = '설마 끌어올려지겠어?';
}());

 

---

 TDZ 추가 예시

console.log(typeof i); // ReferenceError
let i = 10;

 

---

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#시간상_사각지대

let - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN

https://okayoon.tistory.com/entry/호이스팅Hoisting?category=835832 

호이스팅(Hoisting)란?