[JS]호이스팅/TDZ

호이스팅이란?

호이스팅은 변수의 선언이 메모리 공간 선언 시 스코프의 최상단으로 끌어올려지는 것을 의미한다. 이로 인해 작성한 코드와 실제 코드 실행 순서가 달라지는 현상이 발생하게 된다.

function func()
{
	console.log(temp); //선언이 아래에 있지만 일단 실행은 된다(결과 : undefined)
	var temp = 1;
}

호이스팅의 동작 원리

자바스크립트는 함수가 실행될 때 스코프 내 모든 변수에 대해 미리 메모리 공간을 확보해두려고 한다. 때문에 코드를 읽다가 변수의 선언이 이루어지는 부분을 발견하게 되면 메모리에 해당 변수를 미리 저장을 해두게 된다.

즉, 위의 temp 변수는 실제로 console.log() 다음에 메모리에 저장되는 것이 아닌 이미 공간 자체는 지정이 되어있다는 것이다. 하지만 이 때 유의해야하는 것이 ‘공간’은 있지만 실제로 값은 들어가지 않는다는 것이다. 코드 작성 시에는 변수의 선언과 초기화를 같이했지만, 자바스크립트는 이 두 개를 다른 순서로 진행한다.

function func()
{
	var temp;
	console.log(temp); //temp는 메모리에 저장이 되어있지만, 실제 값은 아래에서 대입된다.
	temp = 1;
}

이런 이유로 temp 선언보다 console.log()가 먼저 작성되어도 에러는 발생하지 않는다. 대신 값은 제대로 들어가 있지 않으므로 예상치 못한 오류를 발생하는 원인이 된다.

var만 호이스팅이 발생한다?

이건 틀린 말이다. var 뿐 아니라, const와 let도 호이스팅이 발생하게 된다. 하지만 const, let은 위의 상황에서 오류가 발생하게 된다.(ReferenceError)

이 두 키워드와 var의 차이는 아래에서 작성할 TDZ 적용 유무가 다르다는 것이다.

TDZ란

TDZ는 Temporal Dead Zone의 약자로 변수가 선언되고 초기화 되기 전까지 해당 변수의 사용을 금지하는 구역을 의미한다. 실질적으로 var의 호이스팅으로 일어나는 문제점을 사전 차단하는 개념이라고 할 수 있다.

TDZ는 var는 적용되지 않으며, let과 const 사용시 적용된다. TDZ 안에서 아직 초기화되지 않은 변수를 사용시 무조건 에러가 발생하게 된다.

블럭 스코프, 함수 스코프

호이스팅은 ‘스코프 내’ 최상단으로 변수의 선언을 끌어올려준다. 여기서 스코프는 해당 키워드가 어떤 키워드인지에 따라 다르다. 각 키워드 별 스코프 범위는 아래와 같다.

• 블럭스코프 : const, let
• 함수 스코프 : var

블럭스코프

블럭스코프는 블럭( {...} ) 내에서만 해당 변수/함수의 영향력이 미치는 것을 의미한다. 블럭이라고 하면 함수 선언, if문, for문 등에 사용하는 괄호 범위와 같다.

즉 if문 안에서 선언된 변수는 if문을 벗어난 범위에서는 사용이 불가능하다. 블럭 안에서 다시 내부 블럭이 있는 경우 내부 블럭에서 외부 블럭의 변수에는 접근이 가능하다. 이게 가능한 이유는 해당 스코프에 찾고자하는 변수가 없으면 상위 스코프로 찾으러 간다. 자신보다 상위 스코프 방향으로만 이런 현상이 발생하기 때문에 상위 스코프에서 하위 스코프의 값은 사용할 수 없는 것이다.

function func()
{
	let id = 9;
	if(true)
	{
		const hi = 1;
		console.log(hi); //1
		console.log(id); //9
	}
	console.log(hi); //에러발생! Uncaught ReferenceError
	console.log(id); //9
}

아래와 같은 경우 재선언은 오류가 나지 않는다.(아마 다른 블럭스코프라서 허용이 되는 듯 하다. 동일 블럭상에서는 SyntexError가 발생했다.) 대신 내부 블럭 안에서 보면 let으로 선언한 것으로 인해 블럭 최상단으로 선언이 올라가게 되어 console.log()가 TDZ안에 위치하게 된다. 이 때문에 ReferenceError가 발생한다.

function test()
{
	let hi = 0;
	if(true)
	{
		//let hi; //이렇게 진행이 된다.
		console.log(hi); //에러 발생!
		let hi = 2;
	}
}

함수스코프

함수스코프는 함수 내에서 변수/함수를 선언하면 함수 내 어디에서든 사용할 수 있는 것을 의미한다.

블럭스코프와는 달리 내부 블럭에서 선언한 변수/함수를 외부 블럭에서도 접근이 가능하다!

function test(){
  if(true)
  {
      var a = 100;
      console.log("variable inside the block scope : " , a);
  }
  console.log("variable outside the block scope : " , a); //에러가 발생하지 않는다.
}