[호이스팅] 자바스크립트에서의 호이스팅 규칙

Hoisting이란?
끌어올리다의 의미로 자바스크립트 엔진이 코드가 실행되기전, environmentRecord에 변수정보(매개변수 이름,함수선언,변수명 등...)를 먼저 수집하는 과정을 말한다.

▶️ 예상해보기

function a(x){
	console.log(x);  // 1
	var x;
	console.log(x);  // 2
	var x=2;
	console.log(x)   // 3
}
a(1)

👉 위의 코드의 결과를 예상해 본다면
1 : 함수호출시 전달한 1이 출력
2 : 선언된 변수에 할당한 값이 없으므로 undefined
3 : 할당된 값인 2가 출력

▶️ 호이스팅에 의한 실제 결과

environmentRecord는 현재 실행될 컨텍스트의 대상코드에 어떤 식별자들이 있는지만 관심이 있기때문에, 변수를 호이스팅할 때 변수명만 모두 끌어올리고, 값을 할당하는 과정은 원래 자리에 둔다.

[실제결과]

function a(){
  	var x;			// 1
  	var x;          // 2
  	var x;          // 3
  
  	x=1;            // 4
	console.log(x); // 5
	console.log(x); // 6
	x=2;            // 7
	console.log(x)  // 8
}
a(1)

👉 실제 순서
1 : 변수 x를 선언 (메모리에서 값을 저장할 공간을 확보하고 확보한 공간의 주솟값을 변수 x에 연결해둠)
2 & 3 : 다시 변수를 선언 (이미 선언된 같은 변수가 있으니 무시)
4 : 1을 변수 x에 할당 (1을 빈 메모리공간에 담고 1을 담은 주솟값을 변수 x에 연결)
5 & 6 : 모두 할당된 값인 1이 출력
7 : 2를 변수 x에 할당 (2을 빈 메모리공간에 담고 2를 담은 주솟값을 변수 x에 연결)
8 : 할당된 값인 2가 출력되며 실행컨텍스트가 콜스택에서 제거