호이스팅이 뭔가요?
javascript에서 호이스팅이 갖는 사전적 의미는 “인터프리터가 변수와 함수의 메모리 공간을 선언하기 전 미리 할당하는 것.” 이다.
이해하기 쉽게 생각한다면 코드를 실행하기 전 선언문을 파일의 맨 위로 끌어올린다고 할 수 있다. 하지만 정확히하자면 이와 같은 현상이 일어나는 것을 말한다.
코드가 실행 되기 전 실행 컨텍스트 과정을 위해 함수와 변수가 먼저 메모리에 저장되는 것을 호이스팅이라고 하고 변수는 다음과 같은 단계를 거친다.
- 실행 컨텍스트의 변수를 변수 객체에 등록한다. (선언)
- 변수 객체의 변수를 위한 공간을 메모리에 확보하고 undefined로 초기화된다. (초기화)
- 초기화된 변수에 실제 value를 할당한다. (할당))
다음 예시로 공부해보자!
변수 호이스팅
변수 선언은 var의 경우와 let, const의 경우로 나눌 수 있다.
var는 변수 선언으로 메모리에 저장될 때 ‘undefined’로 초기화가 진행되고, let, const는 초기화 없이 선언만 메모리에 저장된다.
console.log(ex1);
console.log(ex2);
var ex1 = 5;
const ex2 = 10;위 예시의 결과를 살펴보자.
먼저 ex1은 선언에서 undefined로 초기화되기 때문에 undefined가 출력된다.
ex2는 초기화가 되지 않기 때문에 referenceError로 이어진다.
- let이 왜 초기화 없이 선언만 저장되는가?
호이스팅에서 var는 선언과 초기화 단계가 한번에 진행된다. 값이 할당되는 것은 아니지만 메모리에 변수 공간을 확보하고 undefined로 초기화한다.
하지만 let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 초기화 단계는 코드 실행 후 선언문에 도달했을 때 이뤄진다.
그래서 코드 실행 시 상단에서 변수에 접근할 때 (변수를 위한 메모리 공간이 확보되지 않아서) 에러가 뜨는 것이다.
이 때 스코프 시작 지점부터 초기화 시작 지점 까지의 구간(변수를 참조할 수 없는 구간)을 일시적 사각지대(Temporal Dead Zone; TDZ)라고 한다.
함수 호이스팅
console.log(ex1()); // 함수 선언식
console.log(ex2()); // 함수 표현식
function ex1() {
return 1;
}
var ex2 = function() {
return 2;
}함수 선언식의 경우, 함수 전체가 그대로 메모리에 들어간다. 그래서 console.log의 결과 ‘1’이 제대로 출력된다.
함수 표현식의 경우, var로 ex2가 undefined로 초기화 된채로 메모리 들어가기 때문에 ex2()를 호출하면 함수형임을 인식하지 못해 typeError가 뜬다.
마치며
변수 선언문 이전에 변수를 참조해도 호이스팅에 의해 에러를 발생시키진 않지만 프로그램 흐름 상 맞지 않고, 가독성을 떨어뜨리고 오류를 발생시킬 수 있기 때문에 변수 선언문을 먼저 작성해주고 참조해주는 버릇을 들이는 게 좋겠다.
