자바스크립트 호이스팅

아래의 간단한 코드 스니펫을 고려하십시오.

console.log(i);  // undefined
var i = 0;

실행시 위의 코드는 정의되지 않음을 답으로 제공합니다.
이제 스니펫을 다시 관찰하십시오. i 변수는 초기화되기 전에 호출됩니다. 정상적인 경우에는 참조 오류가 발생해야 합니다(초기화 전에 변수를 호출할 수 없음).

그러나 JavaScript에는 없습니다. 왜 그래야만하지? 위의 스니펫과 혼동되는 경우 이 블로그가 적합합니다.

실제로 무슨 일이 일어나고 있습니까?

위의 코드에서 var 키워드는 코드 위에 푸시되고 JavaScript에 의해 자동으로 초기화됩니다(값 0이 아닌 i 변수만 위에 푸시됨). 따라서 코드 실행 시 다음과 같이 됩니다.

var i; // automatically inserted by JS Engine at run time
console.log(i);
var i = 0;

i는 위에서 푸시되고 JS 엔진에 의해 초기화되었으므로 콘솔 라인에서 오류 대신 정의되지 않음이 표시됩니다.

JavaScript에서 코드를 실행할 때 JS 엔진은 변수 및 함수 선언을 코드의 맨 위로 이동합니다. JavaScript의 이 기능 또는 동작을 JavaScript에서는 호이스팅이라고 합니다.

let과 const는 어떻습니까?

위에 쓴대로 JS는 코드 상단에 있는 모든 변수와 함수를 옮기지만 var의 경우 초기화를 해줍니다.
이것은 let & const의 경우가 아닙니다.
let 키워드 기반 변수 선언으로 아래 코드를 고려하십시오.

console.log(i);
let i = 0;

위의 코드를 실행하면 다음과 같은 결과가 나타납니다.


따라서 let 및 const 키워드의 경우 JS 엔진은 변수 선언을 호이스트하지만 초기화하지는 않습니다. JS 엔진은 변수를 알고 있지만 선언되거나 초기화될 때까지 사용할 수 없습니다. 따라서 변수는 선언되고 참조 오류가 발생할 때까지 일시적인 데드 존에 들어갑니다.

함수 호이스팅

위에서 쓴 것처럼 함수는 JavaScript에서도 호이스팅됩니다.

아래 코드를 고려하십시오.

let x = 20,
    y = 30;
let total = add(x, y);
console.log(total);  // 50, because of hoisting
function add(a, b) {
  return a + b;
}

위의 코드에서 정규 함수도 JS에서 호이스팅(스크립트의 맨 위로 이동)하므로 출력은 50이 됩니다.

함수 표현이라면?

아래 코드를 고려하십시오.

let x = 20,
    y = 30;
let total = sum(x, y);
console.log(total); // Error
var sum = function (a, b) {
  return a + b;
};

위의 코드에서 다음과 같은 결과를 얻습니다.

함수는 변수 sum(var 키워드로 선언됨)에 저장되므로 위에서 호이스팅되고 초기화되며(함수 표현식이 아닌 변수만 위에 푸시되고 값은 푸시되지 않음) sum의 값은 정의되지 않습니다. 따라서 sum은 정의되지 않았기 때문에 함수가 아닙니다.
실행 시 코드는 다음과 같습니다.

let x = 20,
  y = 30;
var sum // Automatically inserted by JS engine
let total = sum(x, y);
console.log(total);
var sum = function (a, b) {
  return a + b;
};

결론

모든 변수 및 함수에서 JavaScript 호이스팅이 발생함

호이스팅에서 변수 및 함수가 스크립트 또는 범위 위로 푸시됨

let 및 const는 호이스트되지만 초기화되지 않으므로 선언될 때까지 일시적 데드 존에 남아 있습니다

.

let/const인 경우 항상 변수 선언을 범위의 맨 위로 이동해야 합니다(임시 사각지대 방지)

.

함수 표현식이 게양되지 않음