본문 바로가기

개발에 도움이 되는/JavaScript

호이스팅(Hoisting)

- 호이스팅 (Hoisting) : 코드가 실행하기 전 변수/함수 선언을 실행 컨텍스트 내부 메모리에 저장시킴으로써, 해당 스코프의 최상단으로 끌어 올린 것처럼 처리하는 것

 

자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정 즉, 실행 컨텍스트를 위한 과정을 거친다. 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.

  - 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체

 

코드 실행 전 이미 변수/함수 선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다.

(단, let과 const 등은 참조할 수 없다는 error 메세지가 뜨지만 호이스팅이 안된게 아님)

 

- 변수 생성 단계

 1. 선언 단계 : 변수를 실행 컨텍스트의 변수 객체에 등록, 이 변수 객체는 스코프가 참조하는 대상이 된다

 2. 초기화 단계 : 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보, 이 단계에서 변수(let, const를 제외)는 undefined로 초기화 된다

 3. 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당

 

 var로 선언한 변수는 선언과 초기화가 한번에 이뤄진다.

 let, const는 선언과 초기화가 분리되어 진행된다. 그렇게 때문에 초기화 전까지는 변수를 참조할 수 없다.

 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 일시적 사각지대(Temporal Dead Zone, TDZ)라고 한다. 

 

반응형

'개발에 도움이 되는 > JavaScript' 카테고리의 다른 글

클로저(Closure)  (0) 2022.03.13
스코프(Scope)  (0) 2022.02.27
실행 컨텍스트(Execution Context)  (0) 2022.01.15
Node.js  (0) 2022.01.03
JavaScript  (0) 2021.12.26