호이스팅의 개념을 일목요연하게 말할 수 있도록 정리해보자!
호이스팅이란?
변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상
즉, 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
끌어 올려진 것 같은 현상이란?
- JS엔진은 코드 실행 전 실행 가능한 코드를 형상화하여(모든 스코프 또는 컨텍스트를 순회) 각 스코프의 변수 객체에 여러 식별자를 수집한다.
(실행 컨텍스트를 위한 과정) - JS엔진은 위의 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.
- 실행 컨텍스트는 실행 가능한 코드를 위해 필요한 환경을 의미하고 위와 같은 과정을 거친다.
(선언된 식별자를 모두 알 수 있다.)
호이스팅 대상
초기화를 제외한 선언만 호이스팅한다.
// 예제 1
// y만 호이스팅 대상
x = 1; // x 초기화. x를 선언하지 않은 경우 선언. 그러나 명령문에 var가 없으므로 호이스팅이 발생하지 않음
console.log(x + " " + y); // '1 undefined'
// JavaScript는 선언만 호이스팅하므로, 윗줄의 y는 undefined
var y = 2; // y를 선언하고 초기화
// 예제 2
// 호이스팅은 없지만, 변수 초기화는 (아직 하지 않은 경우) 변수 선언까지 병행하므로 변수를 사용할 수 있음
a = '크랜'; // a 초기화
b = '베리'; // b 초기화
console.log(a + "" + b); // '크랜베리'변수 호이스팅
JS의 모든 선언은 호이스팅이 일어난다.
하지만, let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작한다.
var키워드로 선언된 변수와 달리 let 키워드로 선언된 변수를 선언문 이전에 참조시 참조 에러(Reference Error)가 발생한다.
Why?
let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언 까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.
{
... // TDZ - 해당 구간에선 value를 참조할 수 없다.
let value;
}var키워드는 선언과 동시에 undefined로 초기화되지만,let과const는 초기화되지 않은 상태로 선언만 메모리에 추가되기 때문- 초기화되지 않으면 변수 참조는 불가하다.(Reference Error발생 원인)
즉, let 과 const도 호이스팅으로 인해 에러를 일으키는 것이다!
그래서 장점이 뭐지?
장,단점을 손꼽을 수 없는 이유가.. 호이스팅은 JS엔진의 해야 할 일이기 때문이다..!
JS엔진의 특성인 셈이다.
단지 let, const가 도입되면서 스코프에 대한 에러를 줄일 수 있다는 점이 장점인 것 같다.
참고) 스코프 규칙
let으로 선언한 변수는 자신을 선언한 블록과 모든 하위 블록 각각의 스코프로 가진다.
하지만 var 변수는 자신의 선언을 포함하는 함수이다.
function varTest() {
var x = 1;
if (true) {
var x = 2; // 같은 변수
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
if (true) {
let x = 2; // 다른 변수
console.log(x); // 2
}
console.log(x); // 1
}프로그램 최상위에서 사용할 경우 var는 전역 객체에 추가되지만, let은 추가되지 않는다.
var x = 'global';
let y = 'global';
console.log(this.x, this.y); // global undefined참고문서
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/
