호이스팅

[ 호이스팅 ]

코드가 런타임 이전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상을 말함

호이스팅은 변수 정보 수집 과정을 이해하기 쉽게 설명한 가상 개념(실제로는 그렇진 않더라도 사람이 이해하기 쉬운 말로 풀어 표현한 것)

 

해당 스코프에서 최상단으로 끌어올리는 것이기 때문에 함수 내에서 변수가 선언되었다면 함수 최상단으로, 전역 컨텍스트에서 변수가 선언되었다면 전역 컨텍스트 최상단으로 끌어올려짐

 

호이스팅이라는 용어가 ‘선언이 먼저 메모리에 저장되었다.’는 것을 의미함

자바스크립트의 모든 선언에는 호이스팅이 일어남

호이스팅이 파일의 맨 위로 끌어올려진 것 같은 현상을 의미할 때 선언문 이전에 참조해서 에러(ex. ReferenceError)를 발생시킨다고 호이스팅이 일어나지 않은 것은 아님

 

[ 호이스팅이 발생하는 이유 ]

JS 엔진에서 변수는 선언 → 초기화 → 할당을 거쳐 생성됨

1. 선언단계: 변수를 실행 컨텍스트(실행 코드에 제공할 정보 객체)의 변수 객체에 등록
2. 초기화 단계: 변수 객체에 등록된 변수를 위한 메모리 공간을 확보
   • undefined로 초기화 됨
   • 메모리가 할당되면 메모리 참조를 통해 변수에 접근할 수 있음
3. 할당 단계: 사용자가 정의한 값을 변수에 할당해줌

JS 엔진은 코드를 실행하기 전에 실행 컨텍스트에 등록된 변수 객체에 접근할 수 있음

var의 경우 변수 선언과 초기화가 함께 진행되므로, 변수 객체 등록과 동시에 메모리 공간도 할당 받음

메모리가 할당되면 메모르 참조를 통해 변수에 접근할 수 있게 됨

그래서 var는 메모리를 할당 받은 상태이므로 호이스팅시 메모리 참조를 통해 변수 접근이 가능함

 

let의 경우는 선언과 초기화를 각각 진행시켜 선언단계에서 실행 컨텍스트에 등록은 했지만 메모리를 할당받지 못해 접근이 불가능한 상태이므로 참조할 메모리가 없어 ReferenceError가 발생함

 

함수 선언문의 경우는, 선언과 초기화, 할당이 동시에 진행되므로 실행도 가능함

단, 함수표현식을 사용한다면 ReferenceError가 뜸

 

[ 호이스팅 규칙 ]

▶ 매개변수 및 변수는 선언부를 호이스팅 함

적용 전 예시

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

 

호이스팅 적용 예시

function a () {
	var x;
	var x;
	var x;

	x = 1;
	console.log(x);
	console.log(x);
	x = 2;
	console.log(x);
}
a(1);

 

▶ 함수 선언은 전체를 호이스팅 함

적용 전 예시

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

 

호이스팅 적용 예시

function a () {
	var b; // 변수 선언부 호이스팅
	function b() { } // 함수 선언은 전체를 호이스팅

	console.log(b);
	b = 'bbb'; // 변수의 할당부는 원래 자리에
	console.log(b);
	console.log(b);
}
a();

 

다만 함수 표현식으로 할 경우 선언부만 위로 알라가게 됨. 즉 변수의 할당부는 원래 자리에 있는 것

적용전 예시

console.log(sum(1, 2));
console.log(multiply(3, 4));
function sum (a, b) { // 함수 선언문 sum
	return a + b;
}
var multiply = function (a, b) { // 함수 표현식 multiply
	return a + b;
}

 

호이스팅 적용 예시

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;
};

 

협업을 많이 하고, 복잡한 코드일수록, 전역 공간에서 이루어지는 코드 협업일수록 함수 표현식을 활용하는 습관을 들이는 것이 좋음