자바스크립트 호이스팅의 기본 규칙

소개

호이스팅은 코드가 실행되기 전에 변수 및 함수 선언을 해당 범위의 맨 위로 이동하는 JavaScript 기능입니다. 다음은 이 메커니즘에 대해 알아야 할 규칙입니다.

선언은 호이스트되지만 할당은 그대로 유지됩니다.

var 문은 값 초기화 없이 자신이 속한 전역 또는 함수 범위의 맨 위로 재배치됩니다.

var bool = true;
function show() {
  console.log(bool); // undefined
  var bool = false;
}
show();

호이스팅 메커니즘을 적용하면 위의 코드 행은 다음과 같습니다.

var bool = true;
function show() {
  var bool;
  console.log(bool); // undefined
  bool = false;
}
show();

이 예제는 undefined 변수의 선언이 함수 범위의 맨 위로 이동되었기 때문에 bool를 표시합니다. 지역 변수가 이미 선언되어 있기 때문에 전역 값을 표시하지 않습니다.

Please note that even if we are dealing with functions, this rule remains valid which means that only function declarations are hoisted.

catch 블록의 선언이 호이스팅됩니다.

선언은 catch 블록 안에 있는 경우에도 전역 범위의 맨 위로 이동됩니다.

console.log(object) // undefined
try {
  throw new Error();
} catch (exception) {
  var object = {};
}

let, const 및 class 선언은 호이스팅되지만 초기화되지 않은 상태로 유지됩니다.

let 문은 함수 범위의 맨 위로 호이스팅됩니다. var 문과의 유일한 차이점은 undefined 로 초기화되지 않고 액세스하려고 할 때 대신 ReferenceError 예외가 발생한다는 것입니다.

var scope = "global";
function show() {
  console.log(scope); // Reference error: scope is not defined
  let scope = "local";
}
show();

정확히 무슨 일이...

변수 및 함수 선언은 물리적으로 코드의 맨 위로 이동되지 않고 컴파일 단계에서 메모리에 저장되며 코드에서 입력한 위치에 그대로 유지됩니다.

시간 내주셔서 감사합니다. 저자로부터 업데이트를 받고 싶다면 Twitter에서 그를 팔로우할 수 있습니다.