승강기
- 코드가 실행되기 전에 변수/함수 선언이 범위의 맨 위로 밀려나는 현상.
- 함수 내의 모든 선언을 들어 올려 함수 범위의 맨 위에 놓습니다.
- JavaScript 함수는 실행하기 전에 필요한 모든 변수 값을 수집하여 유효 범위의 맨 위에 선언됩니다.
- 리프팅은 JavaScript의 모든 선언에서 수행됩니다.
- let, const 및 class 선언에서 리프팅이 발생하지 않는 것처럼 동작합니다.
바르
- 선언과 초기화는 한 단계로 이루어집니다.
- 변수 선언문 이전에 변수에 접근하더라도 변수가 유효 범위 내에 있기 때문에 오류가 발생하지 않습니다.
(정의되지 않은 반환)
console.log(text); // ReferenceError
text = "Hello';
var test;
console.log(text); // "Hello"
하자, const
- 호이스팅은 변수 선언 및 함수 표현식에서 발생하지 않습니다.
- 선언 단계와 초기화 단계는 별개입니다.
- 선언된 변수가 선언문보다 먼저 참조되면 ReferenceError가 발생합니다.
+) 변수 생성 단계
1. 선언 단계
- 실행 컨텍스트의 변수 개체에 변수 등록
- 이 변수 객체는 범위가 참조하는 대상이 됩니다.
2. 초기화 단계
- 변수 개체에 등록된 변수를 위한 공간을 예약합니다.
- 이 단계에서 변수는 undefined로 초기화됩니다.
3. 매칭 단계
- unfined로 초기화된 변수에 실제 값 할당
TDZ(Temporal Dead Zone)란 무엇입니까?
- 리프팅 문(let, const, class 등)은 선언만 하고 초기화는 하지 않는 범위를 의미합니다.
- 호이스팅은 블록 단위로 이루어지며, 블록이 생성되면 먼저 블록 내에서 호이스팅하여 선언되며, 일단 선언되면 호스트된 명령어는 초기화될 때까지 TDZ에 상주합니다.
- 초기화되지 않았기 때문에 TDZ에서 명령어를 호출할 때 참조 오류가 발생합니다.
- var는 선언 시 초기화되므로 var의 TDZ가 없습니다.
- TDZ에서 typeof 연산자를 사용하면 참조 오류가 발생합니다.
- 선언되지 않은 변수에 typeof 연산자를 사용하면 결과가 정의되지 않습니다.
{
console.log(bar); // undefined
console.log(foo); // ReferenceError
var bar = 10;
let foo = 2;
}=> var에는 TDZ가 없지만 let에는 TDZ가 있으므로 참조 오류가 발생합니다.
let a = 10;
if (true){
console.log(a); // Reference Error
let a = 10;
}=> 리프트가 블록 단위임을 나타냅니다.
TDZ 구문
- 끊임없는
- 허용하다
- 수업
- 생성자()의 슈퍼()
- 기본 기능의 매개변수
변수, 함수, 가져오기
- 해제시 선언과 초기화는 동일하므로 undefined로 초기화한다.
- 함수 선언 및 가져오기도 풀업되므로 어디에서나 함수 선언을 호출해도 문제가 없습니다.
리프팅 기능
리프트 인 함수 선언
- 코드가 구현된 위치에 관계없이 브라우저가 JavaScript의 특성 리프팅에 따라 JavaScript를 해석하면 리프팅됩니다.
function printName(firstName) { // 함수 선언문
var result = inner(); // 선언 및 할당
console.log(typeof inner); // function
console.log("name is " + result);
function inner() { // 함수 선언문
return "inner value";
}
}
printName(); // 함수 호출
기능적 측면에서 리프트
- 선언 및 호출 순서에 따라 함수가 정상적으로 실행되지 않을 수 있습니다.
- 선언과 할당이 분리되어 있습니다.
- 호출 중인 함수 표현식의 선언(var) => typeError
- 선언이 호출 중이면 (const/let) => ReferenceError
foo1(); // 함수 선언문에서는 호이스팅 일어난다.
foo2(); // 함수 표현식이라서 호이스팅 안된다.
(TypeError)
function foo1() {
console.log('Hello');
}
var foo2 = function() {
console.log('world');
}
MDN 문서 읽기
https://developer.mozilla.org/en/docs/Glossary/Hoisting
리프팅 – MDN 웹 문서 용어집: 웹 용어집 | MDN
JavaScript에서 호이스팅은 변수와 함수가 선언되기 전에 인터프리터가 공간을 미리 할당한다는 것을 의미합니다.
var로 선언된 변수는 언로드 시 정의되지 않은 상태로 초기화됩니다.
developer.mozilla.org
하자 – JavaScript | MDN
Let 선언은 블록 관련 지역 변수를 선언하고 선택적으로 값으로 초기화합니다.
developer.mozilla.org