호이스팅
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
자바스크립트는 코드가 실행이 되기 전, 먼저 JS 엔진이 선언해둔 변수와 함수들 자리를 메모리에 할당합니다. 변수명과 함수명만요.
console.log(a); //undefined
var a = 10;
console.log(a); //10
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 에러가 일어나지 않는 이유입니다.
그렇다면 let과 const는 어떨까요?
console.log(b) // reference Error
let b = 10;
console.log(c) // reference Error
const c = 10;let과 const 호이스팅
let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않습니다. 따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 참조 에러가 발생합니다.
왜냐구요?
임시(시간상) 사각지대 Temporal Dead Zone(TDZ) 때문입니다.
let과 const로 선언된 변수들은 실제 코드에 도달하기 전까지는 TDZ 영역에 존재하며, 접근할 수 없습니다.
var에서 순서도 없이 재선언과 호출이 날뛰던 문제를 ES6에서 let과 const의 TDZ로 규칙을 세우고 잠재적인 버그들을 잡을 수 있게 한 거죠.
"시간상" 사각지대인 이유는, 사각지대가 코드의 작성 순서(위치)가 아니라 코드의 실행 순서(시간)에 의해 형성되기 때문입니다.
{
const func = () => console.log(test); // "is it ok?!"
let test = "is it ok?!";
func();
} 위 코드의 경우 let 변수 선언 코드가 그 변수에 접근하는 함수보다 아래에 위치하지만, 함수의 호출 시점이 사각지대 밖이므로 정상 동작합니다.
그럼 let과 const는 어떻게 다를까요?
그건 다음 시간 let, const, var 키워드에서 얘기해보겠습니다.
참조
https://chihoya.tistory.com/14
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#%EC%8B%9C%EA%B0%84%EC%83%81_%EC%82%AC%EA%B0%81%EC%A7%80%EB%8C%80
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
