안녕하세요 ,

이 기사에서는 JavaScript에서 Hoisting 및 Temporal Dead Zone 의 개념을 설명하려고 합니다 .

호이스팅 은 Javascript에서 일반적으로 사용되는 용어로 , 코드를 실행하기 전에 함수 , 변수 또는 클래스 의 선언 이 해당 범위의 맨 위로 이동되는 것처럼 보이는 프로세스를 나타냅니다.

일반적인 생각과는 달리 호이스팅이라는 용어는 ECMAScript 사양에서 규범적으로 정의된 용어가 아닙니다.

예를 들어 다음 코드를 고려하십시오.

// global scope
console.log(bar); // undefined

foo(); // "Hello, world!"

var bar = 42;

function foo() {
  console.log("Hello, world!");
}

그러나 호이스팅 으로 인해 JavaScript 엔진은 의 선언을 bar전역 범위foo 의 맨 위로 이동하여 효과적으로 다음과 같이 만듭니다.

// global scope
var bar;

function foo() {
  console.log("Hello, world!");
}

console.log(bar); // undefined

foo(); // "Hello, world!"

bar = 42;

var이제 , let, 및 const키워드 의 차이점과 호이스팅과의 관계에 대해 이야기해 보겠습니다 .

바르

var키워드는 JavaScript에서 변수를 선언하는 첫 번째 방법입니다 . 이는 호이스팅 의 영향을 받습니다. 즉, 변수 선언이 런타임 시 해당 범위(전역 또는 함수)var 의 맨 위로 자동으로 이동 됨을 의미합니다.

// global scope
console.log(bar); // undefined <-- PROOF OF THE HOISTING
var bar = 41;
console.log(bar); // 41

function foo() { // function scope
  console.log(bar); // undefined (not 41) <-- PROOF OF THE HOISTING
  var bar = 42;
  console.log(bar); // 42
}

foo();
console.log(bar); // 41

let및 키워드 는 블록 범위 변수 및 상수 const를 선언하는 방법으로 JavaScript의 ECMAScript 2015(ES6) 버전에서 도입되었습니다 .

일반적으로 생각하는 것과는 달리 let및 const키워드 도 호이스팅 대상 입니다.

예를 들어 다음 코드 예제를 고려하십시오.

// global scope
console.log(bar); // ReferenceError
let bar = 42;
// global scope
console.log(bar); // ReferenceError
const bar = 42;

let및 키워드 로 만든 선언 const 도 호이스팅의 대상이 되지만(즉, 해당 범위(전역 또는 블록) 의 맨 위로 이동됨) 일시적 데드존(TDZ) 에 있다고 합니다. 참조 오류가 발생 합니다 .

다음 예를 고려하십시오.

// global scope
let bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 let bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41
// global scope
const bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 const bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41

if연습으로 블록 에서 변수 선언을 제거해 보십시오 . bar이제 전역 범위 변수에 액세스할 수 있습니까 ?

결론적으로 다음 인터뷰에서 "let과 const가 호이스팅됩니까?"라는 질문을 받을 때 다음과 같이 말할 수 있습니다.

let및 키워드 로 만든 선언 const은 효과적으로 호이스팅되지만 임시 데드 존 제한 이 있습니다 (예: JavaScript 엔진은 변수를 인식하지만 변수가 선언될 때까지 사용할 수 없음). 또한 클래스는 let및 와 동일한 형태의 호이스팅이 적용됩니다 const.