JavaScript에서 호이스팅(Hoisting)이란

<호이스팅> 

JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. 여기서 주의할 점은 "선언문" 이라는 것이며 "대입문"은 끌어올려지지 않습니다.

 

<선언에 대해>

JavaScript의 선언에는 3가지 방법이 있습니다.

 

var : 변수를 선언. 추가로 동시에 값을 초기화

let : 블록 스코프 지역 변수를 선언. 추가로 동시에 값을 초기화

const : 블록 스코프 읽기 전용 상수를 선언

 

<변수 선언>

- var x = " " 와 같은 var 키워드로 변수를 선언이 가능하며, 실행 맥락에 따라 지역 및 전역 변수를 선언하는데 모두 사용될 수 있습니다. 

- let y - " " 와 같이 const 혹은 let 키워드로 변수 선언이 가능하며, 블록 스코프 지역 변수를 선언하는데 사용될 수 있습니다. 

 

<var 변수 호이스팅>

지정된 초기 값 없이 var 혹은 let 문을 사용해서 선언된 변수는 'undefined' 값을 갖습니다. 이 뜻은 아직 할당되지 않은 상태입니다.

 

<let, const 변수 호이스팅>

'let' 과 'const' 로 변수를 선언할 때도 변수는 호이스팅되지만, var와 달리 초기화되지 않습니다. 선언되지 않은 변수에 접근을 시도하는 경우 'ReferenceError' 예외가 발생합니다, 변수들은 호이스팅되지만 초기화되지 않았기 때문입니다. 변수는 블록 시작부터 선언이 처리될 때까지 "TDZ" / "Temporal Dead Zone"에 위치하게 되고 접근 할 수 없습니다. "일시적 사각지대" 혹은 Temporal Dead Zone "일시적"인 이유는 사각지대가 코드의 작성 순서가 아니라 코드의 실행 순서에 의해 형성되기 때문입니다. 

 

<정리>

- var는 함수 스코프를 가지게 되고 let, const는 블록 스코프를 갖습니다

- var는 재선언이 가능하지만 let, const는 재선언이 불가합니다

- var 하고 let는 재활당이 가능하지만 const는 불가능합니다

 

참조 : 

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types#variable_hoisting

문법과 자료형 - JavaScript | MDN

https://www.udacity.com/blog/2023/04/hoisting-in-javascript.html#:~:text=Back,classes%20before%20they%20are%20declared.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var

var - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz

let - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

const - JavaScript | MDN