호이스팅 이해하기

hoisting의 hoist는 감아올리다! 라는 뜻이다.
호이스팅은 어원 그대로 변수나 함수의 선언이
코드 최상단으로 끌어올려지는 듯한 현상을 말한다.

호이스팅을 이해하기 위해서는 우선 변수 생성 단계에 대해서 알아야한다.

++ 변수 생성 단계
자바스크립트는 3가지 단계를 거쳐 변수를 생성한다.
1. 선언 : 변수 객체를 실행 컨텍스트에 등록
2. 초기화 : 등록된 변수의 메모리를 확보 >> 여기서 변수는 undefined로 초기화된다.
3. 할당 : 초기화된 변수에 실제 값을 할당한다.

let, const로 변수를 생성할 때는 1,2,3단계가 따로 이루어지고,
var을 사용해 변수를 생성할 시에는 선언 단계와 초기화 단계가 한 번에 이루어진다.
함수 선언문을 사용하면 세 단계 모두 한 번에 이루어진다.

var name = 'Mango';
 
function yourDog() {
	console.log(name);
	var name = 'Ringo'; 
};
 
YourDog();

여기에서 출력되는 변수 name의 값은 Ringo일 것 같지만, 출력되는건 Mango다.

특정 scope에서 선언된 변수가 최상단에서 선언한 것처럼 끌어올려 지는 것.

이걸 호이스팅이라고 한다.

var name = 'Mango';
 
function yourDog() {
	var name;
	
	console.log(name);   // undefined
	name = 'Ringo'; 
};
 
yourDog();

첫 번째 예문의 진행과정 순서를 풀어보면 이렇다.

var키워드 변수는 선언 단계와 초기화 단계가 동시에 진행된다.
자바스크립트 내부적으로 실행 콘텍스트의 변수 객체에 변수를 등록하는 동시에 메모리를 undefined로
만들고, 변수에 값이 할당되기 전에 호출해도 reference에러가 발생하지 않고 undefined가 나온다.

이와 달리 let과 const 는 선언 단계와 초기화 단계가 분리되어서 진행된다.
변수객체에 변수를 등록했지만, 메모리에 할당되지 않아서 접근할 수 없다.
이 때는 Reference Error가 반환된다.
이 말은, 호이스팅 되지않는게 아니라, 호이스팅은 되었으나 메모리가 할당되지 않아서 접근하지 못하는 것이다.

🚩Tdz(일시적사각지대)란 : 변수가 가지고 있는 스코프 시작 지점부터 초기화 시작 지점까지 참조할 수 없는 곳
TDZ는 let과 const에서만 존재하며, var를 사용한다면 TDZ는 존재하지 않는다.
var과 let/const의 차이를 예제코드로 확인해보면,

console.log(mango) // undefined
var mango = 1;

🍧var로 선언하면 변수의 선언,초기화가 동시에 진행된다.
따라서 mango라는 변수를 등록하는 동시에 메모리를 undefined로 할당한다.

console.log(mango) // Uncaught ReferenceError
let mango = 5;
const ringo = 5;

🍪let,const는 선언,초기화 단계가 분리되어 있어서, mango를 참조하는 시점에 초기화가 되어있지 않기때문에
오류가 발생한다. 이 오류가 발생하는 구간을 TDZ라고 부른다.

---

정리하자면..

1. 자바스크립트 엔진은 코드를 실행하기 전에, 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다.
2. 이 과정에서 모든 선언이 변수 객체 메모리에 저장된다.
3. 코드 실행 전 이미 변수, 함수에 대한 선언이 저장되어 있기 때문에, 선언문보다 참조 및 호출이 먼저나와도 동작 할 수 있게 된다.
4. 이는 선언 구문이 마치 파일의 최상단으로 끌어올려진 것처럼(호이스팅) 보인다.