Hoisting

01_Hoisting의 개념

모든 변수 선언은 호이스트 된다.

호이스트란, 변수의 정의가 그 범위에 따라 선언(declaration)/초기화(initialization)/할당 분리 되는것을 의미한다.

즉, 변수가 함수내에 정의 되면 선언이 함수의 최상위로, 함수 바깥에서 정의 되었을 경우 전역 컨텍스트의 최상위로 변경된다. 

 

호이스팅이란

• 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.         - 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.                                                                 - 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.                                           - 유효 범위: 함수 블록{}안에서 유효하다. 
• 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.                                                   - 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.               - 실제 메모리에서는 변화가 없다.

호이스팅의 대상

• var변수 선언과 함수선언문에서만 호이스팅이 일어난다.

var 변수/ 함수 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.

let/const변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

const hoisting = () =>{
	console.log("First-String", str);
    var str = "Hello";
    console.log("Last-String", str);
}
hoisting();
//First-String undifined
//Last-String Hello

var로 변수를 선언해준 경우 First-String 이 undifined라고 나온다. 이는 str이 호이스팅 되었기 때문이다.

 

이 예제를 let과 const로 바꿔보자

 

const hoisting = () =>{
	console.log("First-String", str);
    let str = "Hello";
    console.log("Last-String", str);
}
hoisting();
//First-String str is not defined
//Last-String Hello

 

str is not defined라는 에러가 발생한다. 앞에서 변수가 함수내에서 정의되었을 경우 선언이 함수의 최상위로, 함수바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경된다. 라고 설명했다. 

 

이것을 설명하기위해서는 TDZ(Temporal Dead Zone)라는 개념을 알아야한다.

let/const선언은 기본적으로 실행중인 실행 컨텍스트의 어휘적 환경(Lexical Environment)으로 범위가 지정된 변수를 정의한다. 

변수는 그들의 어휘적 환경에 포함될 때 생성되지만, 어휘적 바인딩이 실행되기 전까지는 액세스할 수 없다. 

새로운 범위에 진입할 때마다 지정된 범위에 속한 모든 let/const바인딩이 지정된 범위 내부의 코드가 실행되기 전에 실행된다.(즉, let/const 선언이 호이스팅 된다.) 이때, 어휘적 바인딩이 실행되기 전까지 액세스할 수 없는 현상을 TDZ라고 한다.

쉽게 말하면 스코프에 진입할 때 변수가 만들어지고 TDZ가 생성되지만, 코드 실행이 변수가 실제 있는 위치에 도달할 때까지 액세스 할 수 없는 것이다.