호이스팅 관련하여 질문

호이스팅의 개념은 자바스크립트가 코드를 평가하고 실행하는 것과 변수를 선언하고 초기화하는 시점에 의해 발생하는 현상입니다. 자바스크립트 엔진은 소스 코드를 실행하는 단계(런타임)에 앞서, "코드를 평가하는 단계"가 존재하고, 이 평가 단계에서는 2가지 일을 수행합니다. 1. 소스 코드에 해당하는 실행 컨텍스트를 생성 2. 소스 코드의 변수, 함수 등의 선언문만 먼저 실행하여 실행 컨텍스트가 관리하는 스코프에 변수/함수 등의 식별자를 등록 질문자분께서 말씀해주신 "선언"이라는 것은 이 평가단계에서 이루어지는 과정, 즉 스코프에 변수의 식별자를 등록하는 과정입니다. 그렇다면 초기화는 무엇일까요? 초기화는 변수의 값을 저장하기 위해, 메모리를 할당해주고 그 초기값을로 undefined를 배정해주는 과정입니다. 초기화는 변수를 어떻게 선언해주었느냐에 따라 다릅니다. var로 선언한 변수의 경우에는 선언과 함께 초기화가 이루어집니다. 하지만 let, const로 선언된 변수의 경우 코드를 실행하는 중 변수 선언문을 만난 시점에서 실행되게 됩니다. 위의 지식을 우리는 알게 되었으니 질문자분께서 주신 예시를 통해 한번 같이 살펴보겠습니다. 1. // 코드가 실행되는 이 시점에서 평과과정을 마무리하여 스코프는 모든 변수들을 알고 있습니다. // 변수 a는 스코프에 등록이 되어있지만(선언) 아직 메모리를 할당받지 못했습니다.(초기화가 되지 않음) let a; // => 이 지점에서 a의 변수가 초기화 되어 undefined의 값을 받았습니다. console.log(a); // => 그렇기 때문에 여기서 undefined의 값을 확인할 수 있습니다. a = 3; 2. // 1번과 마찬가지로 코드가 실행되는 시점에서 스코프는 모든 변수의 식별자를 동록했습니다. // 변수 a는 let으로 선언되었기 때문에 아직 초기화 되지 않았습니다. console.log(a); // => 아직 메모리가 할당되지 않은 변수를 참조하려 합니다. // 아직 메모리가 없는 값, 즉 참조가 불가능한 변수를 읽으려 하기 때문에 자바스크립트 엔진은 참조에러를 띄우게 됩니다. let a = 3; // => a의 변수는 이 시점에서 초기화와 할당이 같이 이루어 지게 됩니다. 이렇게, let/const는 코드를 시작하기 전 값이 선언이 되어 있지만, 실행 중 선언문을 만나기 전까지는 값을 초기화 하지 못하고 이로 인해 참조할 수 없는 구간이 생기게 됩니다. 이를 일시적 사각 지대(Temporal Dead Zone)이라고 합니다. 만일 변수 a를 var로 선언한다면, 질문자분께서 예측하신 것처럼 동작하게 될것입니다.

호이스팅은 자바스크립트 엔진이 코드를 전역적으로 평가하고, 변수들을 먼저 메모리에 등록하는 동작에서 발생하는 현상입니다. 아직 실행되기 전에 미리 필요한 변수들을 메모리에 저장을 하기 때문에 선언문이 마치 최상단으로 끌어올려진 듯한 현상이 발생합니다. 평가 단계에서의 각 var, let, const 키워드는 공통적으로 식별자를 메모리에 먼저 기억을 해두고, 식별 값 초기화는 var 키워드만 진행합니다. var는 식별자를 등록하고 undefined으로 초기화하지만, let, const는 식별자를 등록한 후, 초기화를 하지 않아 식별할 수 없는 상태입니다. var는 undefined으로 초기화되기에 식별값을 가져올 수 있고, 선언문 이전에도 undefined이 출력됩니다. 반대로 let, const는 식별자를 등록하지만 선언문 이전에 호출하고자 한다면 선언문 이전에는 식별값이 등록되지 않기 때문에 refference error ( TDZ ) 일시적 사각 지대 가 발생합니다. -- 이어서 작성해 주신 코드를 시각적으로 보여드리겠습니다. 1번 -------------- 평가 a 확인 -> a 식별자 등록 -------------- 실행 let a; // undefined 식별값 등록 console.log(a); // undefined 출력 a = 3; // 3 식별값 등록 -------------- 2번 -------------- 평가 a 확인 -> a 식별자 등록 -------------- 실행 console.log(a); // a 식별자 확인 -> a 식별값 확인 불가 -> refference error let a = 3; // 3 식별값 등록 console.log(a); // 3 출력 -------------- var의 경우 -------------- 평가 a 확인 -> a 식별자 등록 -> undefined으로 초기화 -------------- 실행 console.log(a); // undefined var a = 3; // 3 식별값 등록 console.log(a); // 3 출력 -------------- 이상 도움이 되었다면 좋겠습니다.

질문에 언급된 개념인 TDZ 때문에 두 코드의 실행결과가 다릅니다. let으로 선언된 변수는 호이스팅되지만 코드에서 실제 선언부로 가기 전까지는 TDZ에 존재합니다. 이름 그대로 이 일시적 데드존 동안엔 레퍼런스 에러가 발생합니다. 이게 var 키워드로 선언한 변수와의 차이이기도 합니다. 1번 코드에서 let a; 는 암시적으로 a에 undefined를 할당합니다.