[ JS ] 호이스팅

호이스팅

호이스팅이란, 선언문이 해당 스코프의 최상단으로 끌어올려진 듯 동작하는 현상을 의미한다.

변수 호이스팅과 함수 호이스팅으로 분류할 수 있다.

 

변수 호이스팅

변수 호이스팅에서는 var 키워드 선언과 let, const 키워드 선언한 경우 차이가 있다.

• var
  선언문 이전에 해당 변수를 참조할 경우 undefined를 반환한다.
• let, const
  선언문 이전에 해당 변수를 참조할 경우 Reference Error 발생한다.
  let, const 선언문은 호이스팅이 발생하지 않는 것처럼 보이지만, var과 동일하게 호이스팅이 발생한다.

let hoisting = 1;
{
	console.log(hoisting); // Reference Error
	let hoisting;
}

호이스팅이 발생하지 않는다면 1이 출력되겠지만, 
Reference Error가 발생하는 것을 통해 호이스팅이 발생하는 것을 확인할 수 있다.

var와 let,const 호이스팅 동작 차이가 발생하는 이유는 ?

런타임 이전에 자바스크립트 엔진이 실행 컨텍스트의 Lexical Environment에 변수를 등록하는 과정에 있다.

• var : 선언 단계와 초기화 단계가 함께 진행 
  선언 단계에서 Lexical Environment에 변수 등록 
  초기화 단계에서 undefined로 변수를 초기화
• let, const : 선언 단계와 초기화 단계가 함께 진행되지 않는다
  선언 단계에서 Lexical Environment에 변수 등록
  초기화 단계는 선언문에 도달했을 때 진행 
  ( Temporal Dead Zone, 일시적 사각지대 : 스코프의 시작 지점부터 선언문까지를 TDZ라 한다. )

 

 

함수 호이스팅

함수 호이스팅은 함수 선언문과 함수 표현식에 차이가 있다.

• 함수 선언문 : 런타임 이전에 실행 컨텍스트에 등록 
  함수 객체로 초기화되기 때문에 선언문 이전에 함수 호출 가능
  
  
• 함수 표현식 : 변수 호이스팅과 동일하게 동작

 

꼬리 질문

- 선언 단계, 초기화 단계, 할당 단계란 ?

• 선언 단계 런타임 이전, 스코프에 변수와 함수 선언문을 스코프에 등록하는 단계.
• 초기화 단계 등록된 변수에 undefined로 초기화하는 단계. 함수 선언문은 함수 객체로 초기화 . 함수 표현식은 undefined로 초기화.
• 할당 단계 변수에 특정한 값을 부여하는 단계.

 

- Temporal Dead Zone, 일시적 사각지대 

• let과 const로 선언한 경우, 스코프의 시작부터 선언문 이전까지를 TDZ라고 합니다. let과 const는 선언 단계와 초기화 단계가 분리되어 진행되기 때문에 TDZ가 발생

 

- undefined, null, undeclare란 ? 

• undefined : 변수 선언은 되었으나 값이 할당되지 않은 상태, 초기화된 상태. → 개발자 의도적으로 undefined를 할당하는 것은 지양
• undeclared : 스코프에 등록되지 않은 상태
• null : 의도적으로 빈 값을 할당할 경우

- let, const, var의 차이

 

- 실행 컨텍스트, Lexical Environment