[인간JS되기] 호이스팅

제로초님 강의 듣고 정리 중

[인간 JS 엔진 되기 1-5]

 

 

호이스팅이란? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
var - 호이스팅 시 변수를 초기화 (undefined)

let/ const - 호이스팅 시 변수 초기화X

 

 

 

function a(){
    console.log('a');
    b();
    console.log(x); // TDZ
    const x = 'x2'; 
}

TDZ (Temporal Dead Zone)

스코프의 시작 지점부터 초기화 시작 지점까지의 구간

 

 

 

 

 

 

 

 

 

호이스팅을 염두에 두고 코드 분석해보기

예시 코드

const x = 'x1';
console.log(z);
var y = 'here';
const z = () => {};
function c(){
    const y = 'y';
    console.log('c');
    function b(){
        const z = 'z';
        console.log('b');
        c();
    }
}

function a(){
    console.log('a');
    b();
    console.log(x); // TDZ
    const x = 'x2'; 
}

a();
c();

var로 선언한 코드가 있으면 상단으로 올린다

이 때 var y = 'here' 코드 한 줄이 통째로 다 올라가는 것이 아니다

호이스팅 된다고 하더라도, var y; 만 올라간다(선언만 올라감) 그리고 선언은 두번도 가능하다

그리고 const나 let은 상단으로 올릴 수 없다

 

function들은 통째로 상단으로 올린다 => 호이스팅

나머지는 그 상태를 유지

 

 

 

수정 후 코드

var y;
function c(){
    const y = 'y';
    console.log('c');
    function b(){
        const z = 'z';
        console.log('b');
        c();
    }
}

function a(){
    console.log('a');
    b();
    console.log(x); // TDZ
    const x = 'x2'; 
}

const x = 'x1';
console.log(z);
y = 'here';
const z = () => {};


a();
c();

이 상태에서 다시 코드를 읽어 내려가면서 분석 해보면 된다

 

---

 

위의 코드를 살펴보면

const z 윗부분은 전부 TDZ이다. 그렇다면 console.log(z)는 어떻게 가능할까?

분명 z 보다 위에 있는데 에러 안나고 제대로 출력이 되는것일까?

 

이럴 경우에는 function을 통째로 접어서 생각하면 된다

 

 

접어놓은 함수 안에서 z에 접근하는 것은 지난 시간에 했던 '선언에 대한 머릿속의 그림'을 그려서 해석하면 된다

TDZ는 함수 내부에 까지 영향을 미치는 것이 아니다

따라서 위의 코드 TDZ에서는 z가 걸리지 않는다