JavaScript Hoisting

llama·2022년 5월 27일

JavaScript

목록 보기

5/11

사전 설명

선언(Declaration) : var,let 키워드로 변수를 선언만 한 것이다. var some; let some;
💡 const는 재할당이 불가능하기 때문에 선언과 동시에 값을 할당 해야한다.
초기화(Initialization) : 식별자에 메모리가 할당된 상태이다. var some; => undefined
할당(Assignment) : 변수에 실제 값을 넣어주는 것이다. let some = "some";
TDZ(Temporal Dead Zone) : 일시적 사각지대 (스코프의 시작 지점부터 초기화 시작 지점까지의 구간)
자바스크립트 엔진은 코드를 실행하기전 실행 컨텍스트를 위한 과정을 거치는데 이과정에서 모든 선언을 스코프에 등록한다.
실행 컨텍스트 : 코드가 실행되기 위해 필요한 환경이다.

Hoisting

변수와 함수의 선언부가 위치한 인접 스코프의 시작 지점에서 해당 식별자를 관측할 수 있는 현상이고 호이스팅은 크게 함수 호이스팅과 변수 호이스팅으로 나뉜다.

Hoisting 규칙

선언된 함수는 상단에서 참조, 호출이 가능하다.
선언된 var는 상단에서 참조, 할당이 가능하다.
선언된 let, const는 상단에서 참조, 할당이 불가능하다.

Function hoisting

함수의 호이스팅이 다른 무엇보다 먼저 이뤄지고, 함수의 호이스팅은 선언문에만 해당하지만 표현식도 결국 어떠한 변수로 함수를 할당하는것과 같은 사례로 볼 수 있다.

함수의 선언문은 해당 함수 참조에 대한 초기화까지 자동으로 이뤄지기 때문에 선언된 함수는 상단에서 참조, 호출이 가능하다.

Variable hoisting

선언 : 파싱 과정에서 변수에 대한 식별자들을 수집한다.
초기화 : 식별자에 메모리를 할당하고 undefined 상태를 부여한다.
🚨 변수 선언 키워드에 따라 선언, 초기화 시점이 다르다.
할당 : 변수에 직접 값을 할당한다.

var

호이스팅이 발생하면 선언과 초기화가 거의 동시에 이뤄지고, 실행 시점에서 스코프 최상단에 메모리가 있기 때문에 선언 위치와 관계 없이 참조, 할당이 가능한 것이다.

let, const

호이스팅이 발생하면 선언만 이뤄지고 실행 시점에서 해당 변수에 대한 메모리가 존재하지 않기 때문에 선언 위치보다 상단에서 참조, 할당이 불가능한 것이다.
💡 TDZ(Temporal Dead Zone)시점에서 변수는 선언되었지만 초기화가 되지 않은 상태이기 때문에 호이스팅의 범주에 들어갈 수 있다 없다라는 의견이 분분하다.

Example

hoist(); // hoisted!

function hoist() {
  console.log('hoisted!');
}


console.log(text); // undefined
var text;


console.log(text); // ReferenceError: Cannot access 'text' before initialization
let text;


console.log(text)
const text = "text"; // ReferenceError: Cannot access 'text' before initialization


const text; // SyntaxError: Missing initializer in const declaration