[JS] 호이스팅

강은비·2021년 12월 21일
0

JS

목록 보기
6/19
post-custom-banner

코어 자바스크립트 책을 읽고 배운 내용을 바탕으로 작성되었다.


호이스팅

  • 변수 선언문, 함수 선언문 등 모든 식별자 선언문이 해당 스코프의 최상단에 옮겨진 것처럼 동작하는 특성
  • 스크립트 전체, 실행 중인 함수, 코드 블록 등은 자신만의 Lexical Environment를 갖는다.
  • 렉시컬 환경 객체에는 environmentRecord가 있으며, 컨텍스트 내부 코드를 처음부터 끝까지 훑으며 식별자들의 정보(변수명, 함수명)들을 순서대로 수집하여 environmentRecord에 저장된다.
  • 따라서 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 식별자들을 모두 알고 있게 된다. 이에 따라 Hoisting이 일어난다.
  • 변수는 선언부와 할당부를 나누어 선언부만 해당 스코프의 최상단으로 끌어올리는 반면, 함수 선언은 함수 전체를 끌어올린다.

👉 변수 호이스팅

  • 변수는 var, let, const 총 3가지 키워드 중 하나로 선언될 수 있다.
  • var로 선언된 변수의 경우 선언부만 해당 스코프의 선두로 끌어올리고 호이스팅 시 변수에 undefined를 할당하여 초기화한다.
  • letconst으로 선언된 변수도 선언부와 할당부로 나누어 선언부만 해당 스코프의 선두로 끌어올리지만, var로 선언된 변수와 달리 undefined로 값이 초기화되지 않는다. 만약 변수에 값을 할당하기 전에 접근하면 참조 에러가 뜬다.
  • let이나 const 키워드로 선언된 변수는 변수가 선언된 시점부터 초기화되기 전까지 변수를 참조할 수 없는 TDZ(Temporal Dead Zone, 일시적 사각 지대)에 있게 된다.

👉 함수 호이스팅

  • 함수 선언문은 해당 스코프의 최상단에 함수 전체를 끌어올리게 되어, 함수 선언문 이전에 함수를 호출하면 오류가 발생하지 않는다.
  • 함수 표현식에서도 호이스팅이 발생하는데 이는 변수 호이스팅 규칙을 따른다.
  • 만약 함수 표현식에서 var 키워드로 변수를 선언했다면 변수의 선언문이 해당 스코프 최상단으로 끌어올려지고 undefined로 초기화된다. 만약 함수 표현식이 정의되기 이전에 함수를 호출한다면, 해당 함수는 함수명이 아닌 undefined으로 초기화된 변수로 인식하게 되어 타입 에러가 발생한다.
  • 반면, let이나 const 키워드로 변수를 선언했다면, 참조 에러가 발생한다.
post-custom-banner

0개의 댓글