[JavaScript] hoisting

앞서 공부한 내용에서 var 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)에서 변수가 선언되기 전에 x의 값을 출력하기 때문에 undefined로 추측할 수 있다.
• 변수정보를 수집하는 과정인 호이스팅 처리를 통해 어떤 값이 나오는지 확인해보자.

// 호이스팅 처리 후
function a() {
    var x;
    var x;
  	var x;
  
  	x = 1;
    console.log(x); // --- (1)
    console.log(x); // --- (2)
	x = 2;
    console.log(x); // --- (3)
}
a(1);

• 호이스팅할 변수명만 끌어올리고 할당되는 부분은 그대로 있다.
• 위의 코드를 해석하면 순서대로 1, 1, 2 의 값이 출력이 된다.

---

함수선언문의 호이스팅도 추가로 알아보자.

function a() {
  	console.log(b);
    var b = 'bbb';
    console.log(b);
    function b() {}
    console.log(b);
}
a();

• 아까와 마찬가지로 호이스팅 과정을 통해 출력되는 값을 확인해보자.

function a() {
    var b;
    var b = function b() {}

    console.log(b);		//	[Function: b]
	b = 'bbb';
    console.log(b);		//	'bbb'
    console.log(b);		//	'bbb'
}
a();

• a 함수를 실행할때 a 함수의 실행 컨텍스트가 콜스택에 쌓이고 이때 변수명과 함수 선언이 호이스팅이 된다.
• 호이스팅된 값들은 환경레코드에 저장된다.
• 나머지 할당되는 값들은 그대로 있는다.
• 값을 해석해본다.

---

함수 선언문과 함수 표현식의 호이스팅에 대해 알아보자.

console.log(sum(1, 2));
console.log(multiply(3, 4));

function sum (a, b) {		// 함수 선언문
	return a + b;
}

var multiply = function(a, b) {		// 함수 표현식
	return a + b;
}

// 호이스팅이 된 코드
var sum = function sum (a, b) {	// 함수 선언문은 전체를 호이스팅 한다.
	return a + b;
}
var multiply	// 변수이기 때문에 선언부만 호이스팅 된다.

console.log(sum(1, 2));
console.log(multiply(3, 4));

multiply = function(a, b) {		// 변수의 할당부는 원래자리에 남겨져 있다.
	return a + b;
}

• 변수 sum의 메모리 공간이 확보되고 주솟값을 변수와 연결한다.
• 변수 multiply의 메모리 공간이 확보되고 주솟값을 변수와 연결한다.
• sum 함수를 또 다른 메모리 공간에 저장하고, 앞서 선언한 변수 sum에 할당된다.
• sum 함수 실행.
• multiply 함수 실행.
• sum 함수의 실행에서는 정상적으로 실행되어 '3' 이라는 값이 출력된다.
• 하지만 multiply 함수를 실행할 때에는 값이 할당되어 있지 않기 때문에 'Type Error'가 발생된다.
• 이후 아래의 코드는 실행되지 않고 런타임이 종료된다.

함수 선언문의 경우 선언과 동시에 함수가 생성되기 때문에 혹시 모를 개발자들의 실수가 있을 시 위험하다고 한다. 함수 표현식의 경우에는 함수가 담긴 변수만이 호이스팅 되기 때문에 보다 안전하다고 할수 있겠다.

📌 참고도서

• 코어 자바스크립트 - 정재남