호이스팅과 스코프, TDZ

호이스팅이란?

 

javascript에서의 호이스팅은 선언 부분을(할당 x)  전역 혹은 지역 스코프에서의

최상위로 끌어올린 듯 먼저 실행시키는 것을 뜻한다.

모든 선언에는 호이스팅이 일어나지만 대표적으로 let과 const는 호이스팅이 일어나지 않는 것처럼 보인다.

그 이유는 밑에 TDZ존에서 확인하도록 하자.

 

스코프란?

 

Scope란 범위라는 말로, 2가지 타입으로 나뉘어 진다.

첫번째는 global scope( 전역 스코프) , 두번째는 local( 지역 스코프) 이다.

 

전역 스코프

코드의 어느곳에서든 참조할 수 있는 범위,

이곳에 선언된 변수는 전역 변수가 되며 코드 어디에서든 참조가 가능하다.

let A = 'global'

function B(){
console.log(A)
}

A //global scope
console.log(A) // global scope

 

지역 스코프

 

코드블록과 함수내에서의 범위이며 자기 자신과 하위 범위에서만 참조 가능하다.

이곳에서 선언된 변수는 지역 변수가 되며 해당 지역과 그 하위 지역에서만 참조가 가능하다.

 

let A = 'global';

function B() {
let x= 'local';
console.log(x);
}

B(); // local
console.log(A); //global

 

TDZ란?

 

TDZ(Temporal Dead Zone)은 직역하면 일시적인 사각지대라는 뜻이다.

이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ라고 부른다.

알기 쉽게 풀어 말하자면,

 

이 처럼 변수 선언 및 초기화 하기전 사이의 사각지대를 뜻한다.

이 때문에 TDZ에 영향받는 구문의 경우, 호이스팅이 일어나지 않는 것처럼 보이나 

실은 선언 및 초기화 전에는 TDZ존에 있고, 호이스팅이 일어나긴 하지만 결국 속해있는 블럭의 최상단, 

TDZ의 맨위로 불려가기 때문에 ReferenceError를 발생시키는 것이다.

즉, 변수를 선언 및 초기화 하기전에 사용하게 되면 TDZ 상태에서 사용하는 것이기 때문에

ReferenceError가 나타나게 되는 것이다.

 

TDZ에 영향을 받는 구문- const,let,class

 

TDZ에 영향받지 않는 구문-   var,function,import

 

따라서 const,let,class를 사용할때는 항상 순서를 주의해야 하고,

var은 변수 선언 전에도 사용할 수 있기 때문에 코드가 엉키거나 오류를 일으키는 

원인이 되므로 var의 사용은 피하고 let과 const를 주로 사용하도록 해야 한다.

 

함수 선언식과 함수 표현식

 

함수 선언식

 

함수명이 정의되어 있고, 별도의 할당 명령이 없는 것.

 

function sum(a,b) {
    return a + b;
}

 

함수 표현식

 

정의한 function을 별도의 변수에 할당하는 것

 

const sum = function(a,b) {
    return a + b;
}

 

함수 선언식과 함수 표현식의 호이스팅

 

함수 선언식은 함수 전체를 호이스팅 한다.

함수 표현식은 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 

선언부만 호이스팅 한다.

따라서 둘다 호이스팅이 일어나는 것은 맞지만, 함수 선언식은 호이스팅이 일어나는 것처럼

함수 표현식은 호이스팅이 일어나지 않는 것처럼 보인다.