Front-end/JavaScript

자바스크립트 호이스팅

NiceKHJ 2024. 7. 24. 17:49

1. 호이스팅 이란?

 

호이스팅은 자바스크립트에서 변수와 함수 선언이 그들이 속한 스코프의 최상단으로 끌어 올려지는 것처럼 동작하는 특성을 말합니다. 실제로 코드가 물리적으로 이동하는 것은 아니고 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 먼저 메모리에 저장 하는 방식으로 작동합니다.

 

2. 변수 호이스팅

 

2-1 var 키워드

var 키워드로 선언된 변수는 호이스팅 시 undefined로 초기화됩니다.

 

2-2 let 과 const 키워드

let 과 const 로 선언된 변수도 호이스팅되지만 초기화되기 전까지 접근할 수 없는 일시적 사각지대(Temporal Dead Zone)에 놓이게됩니다.

 

 

3. 함수 호이스팅

 

3-1 함수 선언문

함수 선언문은 전체가 호이스팅됩니다. 따라서 함수를 선언하기 전에 호출할 수 있습니다.

 

3-2 함수 표현식

함수 표현식은 변수 호이스팅과 동일하게 동작합니다.

 

4. 호이스팅의 실제 동작 원리

호이스팅은 실행 컨텍스트의 생성 단계에서 일어납니다. 자바스크립트 엔진은 코드를 실행하기 전에 전체 코드를 스캔하며 변수와 함수 선언을 메모리에 저장합니다.

 

5. 호이스팅의 주의사항

  1. 가독성 : 호이스팅은 코드의 가독성을 해칠 수 있으므로 변수와 함수는 사용하기 전에 선언하는 것이 좋습니다.
  2. 예측 가능성 : let 과 const 를 사용하면 TDZ로 인해 더 예측 가능한 코드를 작성할 수 있습니다.
  3. 함수 표현식 사용 : 함수 선언문 대신 함수 표현식을 사용하면 호이스팅으로 인한 혼란을 줄일 수 있습니다.