호이스팅과 TDZ | Trouble Wiki

호이스팅과 TDZ

변수의 종류와 호이스팅

자바스크립트의 변수로서 var, let, const 가 존재하는 것은 알 것이다. 각각의 차이는 무엇일까?

	const	let	var
유효 범위	블록 스코프	블록 스코프	함수 스코프
재 할당	불가능	가능	가능
재 선언	불가능	불가능	가능

그래프로 보기에는 뭐든지 가능한 만능 아이템 인 것 같은데

실제로는 제일 위험한 녀석이다. var의 특징에대해 알아보자.

var의 특징

var로 선언한 변수의 스코프는 함수거나 전역으로 작동한다.

이게 왜 문제라면, 호이스팅이라는 문제가 발생하기 때문이다.

jsx

if (true) {
  var test = true; // 'let' 대신 'var'를 사용
}
 
alert(test); // true, if 문이 끝났어도 변수에 여전히 접근 가능
 
/////
 
for (var i = 0; i < 10; i++) {
  // ...
}
 
alert(i); // 10, 반복문이 종료되었지만 'i'는 전역 변수이므로 여전히 접근 가능

블록단위로 스코프가 존재하지 않기때문에
원래 같으면 error로 작동하지 않아야할 코드가 자기 멋대로 작동해 버리는걸 확인할 수 있다.

이러한 부분을 고려하지않으면
전혀 예상치 못한 변수나 함수가 불러와져서 치명적인 버그를 야기할 수도 있는 것이다.

jsx

let user;
let user; // SyntaxError: 'user' has already been declared

jsx

var user = "Pete";
 
var user = "John"; 
 
// 이 "var"는 아무것도 하지 않는다.
// ...에러 또한 발생하지 않는다.
 
alert(user); // John

상단의 let으로 만든 변수와 달리,

var로 만든 변수는 중복선언을 문법으로 지정해도 아무 에러를 발생시키지 않는다.

jsx

function sayHi() {
  phrase = "Hello";
 
  alert(phrase);
 
  var phrase;
}
sayHi();

위에있는 코드가 작동하게 된다. 보통 다른 변수는 선언 후 초기화가 이루어지고
그 후 작동하게 되는데, var의 경우 그 전에도 사용이 가능하다.

이런 것을 호이스팅 이라고 하고, 호이스팅은 변수가 끌어올려지는 현상을 의미한다.

Temporal Dead Zone

그렇다면 호이스팅은 var만 이루어지는 걸까? 실제로는 아니다.
우선 변수의 생성과정을 기억하자.

선언 단계: 변수를 선언한다. 아직 값은 없다. 변수가 선언만 된 상태이다.
초기화 단계: 변수를 초기화한다. undefined가 할당되어 있다.
할당 단계 : 변수에 값을 할당한다. 개발자가 작성한 값이 할당되어 있다.

var 변수의 생성과정

선언 및 초기화 단계 : var는 선언/초기화를 동시에 진행한다. 따라서 호이스팅 되어도 undefined를 뱉는다.
할당 단계 : 변수에 작성한 값이 할당된다.

let 변수의 생성과정

선언 단계 : 변수를 선언한다.
초기화 단계 : 변수에 undefined가 할당된다.
할당 단계 : 변수에 작성한 값이 할당된다.

const 변수의 생성과정

선언/초기화 및 할당 단계 : const는 모든 작업을 동시에 진행한다.

이러한 차이점 때문에 호이스팅 되더라도 초기화되어있지 않아 에러가 발생한다.
그로인해 ‘아 호이스팅 되지 않는구나’하고 착각하게 되는 것이다.

let, Const 둘다 호이스팅이 되지만, Temporal Dead Zone에 의해 에러가 발생하여 코드가 작동하지 않는 것이다.

jsx

let age = 30;
function showAge(){
	console.log(age); //temporal Dead Zone
	let age = 20;
}

이러한 코드가 잇다고 가정해보자, let이 정말 호이스팅 되지 않는다면
전역 스코프인 30이 출력되고 종료될 것이다. 실제로는 에러가 발생하게 된다. 해당 console.log의 범위가 TDZ가 되어서 그렇다.

let은 재선언이 불가능하나 함수 스코프로서 지정할 경우 문제없이 작동하는데,

호이스팅 되어 에러가 발생하는 것이다.

댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.

댓글을 불러오는 중...