함수, 변수의 호이스팅 ( Hoisting )

호이스팅

• 정의 : 함수, 변수의 선언이 마치 위로 끌어올려진 것처럼 동작하는 것을 이야기한다.
• 동작 이유 : JavaScript가 코드를 해석하고 실행하는 과정과 내부적인 변수의 선언, 할당 과정 때문이다.
• 동작 과정
  1. JavaScript는 코드를 실행하기 전에 먼저 선언된 변수, 함수 등을 전역 환경에 담아두게 된다.
  2. 이후에 정리된 코드를 실행하는 과정을 수행

변수 선언 단계

1. 선언 단계
   • 선언한 변수를 식별자가 담기는 객체에 할당하는 단계
2. 초기화 단계
   • 변수에 할당할 메모리 공간을 부여하는 단계
3. 할당 단계
   • 정의된 변수에 데이터가 할당되는 단계

TDZ ( Temporal Dead Zone )

• let 과 const 는 선언 단계와 초기화 단계가 분리되어 실행되고, 그 사이에 TDZ가 존재한다. 따라서 초기화 단계를 거치기 전에 해당 공간에서 변수를 참조하려 시도하면 참조 에러 ( Reference Error ) 를 발생시킨다.
• var 는 선언 단계와 초기화 단계가 함께 이루어진다. ( 변수를 변수명들이 담기는 전역 객체에 담아주는 과정과 해당 변수에 메모리 공간을 할당해주는 과정이 함께 수행된다.) 따라서 TDZ가 존재하지 않는다. 즉, undefined를 할당 받는다.
• 함수 표현식 방식은 TDZ의 영향을 받기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다.
  • 함수 표현식 방식 예) function aa(){}
• 함수 선언식 방식은 TDZ의 영향을 받지 않고 호이스팅의 영향을 받게 된다. 따라서 함수 그 자체가 끌어올려진 것처럼 동작한다.
  • 함수 선언식 방식 예) const data = function(){}