🔹 Hoisting
호이스팅이란?
(프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경)인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
(=변수나 함수의 선언이 코드 최상단으로 끌어올려지는 듯한 현상)
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수텍스트의 경우 호이스팅 시 변수를 초기화하지 않습니다.
- var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화까지 해주는 반면,
let과 const로 선언한 변수의 경우, 선언보다 먼저 호출하면 ReferenceError가 발생하는데, 이를 TDZ(Temporal Dead Zone, 일시적인 사각지대)에 걸렸다고 얘기합니다.
- TDZ(Temporal Dead Zone)는 선언 ~ 초기화 단계 사이를 이야기한다.
* const예시
console.log(a); // ReferenceError
const a = '1';const a = '1' 전까지, 변수 a 는 TDZ 구간에 놓여 있다.
그 이유는 var과 달리 const는 코드를 실행하는 시점에서는 실행 컨텍스트 추가만 됐기 때문이다.
그러므로 console.log(a) 입장에서는 변수 a는 선언~초기화 사이 단계인 것이며, 이 때는 메모리 할당을 받지 못해 참조할 메모리가 없으므로 ReferenceError: Cannot access 'a' before initialization 자바스크립트 에러가 발생한다.
🏃🏻 단, 참조할 메모리가 없는 것이지 호이스팅이 발생하지 않는 건 아니다 !
🔹 스코프, 호이스팅, TDZ
-스코프 : 변수나 함수에 접근할 수 있는 위치 -호이스팅 : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것.
-TDZ : 참조 오류가 나는 구간인 스코프 시작지점부터 초기화 지점까지의 구간. 선언 전에 변수를 사용하는 것을 비허용하는 개념상의 공간이다.
🔹함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
-함수 선언식은 호이스팅 되지만 함수 표현식은 호이스팅 되지 않으므로 정의된 범위에서 로컬 변수의 복사본을 유지할 수 있다.
🔹실행 컨텍스트와 콜 스택
-실행 컨텍스트 : 자바스크립트 코드가 실행되는 환경을 의미 -콜 스택 : 콜 스택은 코드가 실행되면서 생성되는 실행 컨텍스트를 저장하는 자료구조
🔹스코프 체인, 변수 은닉화
-스코프 체인 : 스코프 체인에 식별자가 없으면 상위 스코프에서 다시 찾아 나간다. -변수 은닉화 : 직접적으로 변경되면 안 된느 변수에 대한 접근을 막는 것을 말한다.
🔶호이스팅과 TDZ는 무엇일까 ? (정리)
스코프 안에서 선언된 변수가 코드에 적힌 순서와 상관없이 "최상단에서 선언한 것처럼" 끌어 올려진 것입니다. var로 선언한 변수의 경우 호이스팅시 undefined로 값이 초기화 되는 반면에 let과 const는 값이 초기화 되지 않습니다. let과 const로 선언한 변수의 경우 선언보다 먼저 호출하면 메모리 할당을 받지 못해 참조할 메모리가 없으므로 ReferenceError가 발생하는데, 이를 TDZ(Temporal Dead Zone, 일시적인 사각지대)에 걸렸다고 얘기합니다.
TDZ란 참조 오류가 나는 구간인 스코프 시작지점부터 초기화 지점까지의 구간. 선언 전에 변수를 사용하는 것을 비허용하는 개념상의 공간입니다.
💟 참고자료
호이스팅
