#1 변수, 호이스팅, TDZ(Temporal Dead Zone)

변수

기초 시간에 let, const를 배워보았다. 이번엔 var 키워드에 대해서 알아보자.

var는 한번 선언된 변수를 다시 선언이 가능하다.

var name = 'Mike';
console.log(name);	// Mike

var name = 'Jane';
console.log(name);	// Jane

이와 같이 name이 2번이 선언되어도 오류가 발생하지 않는다.

같은 상황에서 let은? 오류를 발생시킨다.

var는 선언하기 전에도 사용이 가능하다

console.log(name);	// undefined

var name = 'Mike';

var는 아래 코드와 같이 동작한다.

var name;

console.log(name);

name = 'Mike';

var로 선언한 모든 변수는 코드가 실제로 이동하진 않지만, 최상위로 끌어올려진 것처럼 동작한다. → 호이스팅

그런데 코드를 보면 Mike가 출력되는 게 아닌 undefined 가 출력된다. 이유가 뭘까?

이유는 선언은 호이스팅이 되지만, 할당은 호이스팅이 되지 않았기 때문이다.

let과 const는 오류를 발생시키는데 호이스팅이 안 되는 건가?

→ 호이스팅은 되지만, TDZ (Temporal Dead Zone) 때문이다.

let과 const는 TDZ의 영향을 받는다.

TDZ는 변수가 선언되고 초기화되기 전까지의 구간이다.

console.log(x); // ReferenceError
let x = 5;

변수는 총 3단계의 생성과정을 거친다. 1. 선언단계 2. 초기화 단계 3. 할당단계

var는 선언과 초기화가 동시에 이루어진다.

그래서 할당 전에 호출하면 에러를 내지 않고 undefined가 나온다.

let은 선언단계와 초기화단계가 분리되어서 진행된다.

호이스팅 되면서 선언단계는 이뤄지지만, 초기화단계는 실제 코드에 도달했을 때 발생하기에 레퍼런스에러가 발생한다.

const는 선언과 할당이 동시에 되어야 한다.

let name;
name = 'Yeon';

var age;
age = 30;

const gender;
gender = 'male';	// Error 선언과 할당이 동시에 안일어남

var는 함수 스코프(function-scoped)

let과 const는 블록 스코프(block-scoped)이다.

블록 스코프는 모든 코드블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 외부에서 접근할 수 없다는 의미다.

→ 코드블록 내부에서 선언된 변수: 지역변수

const age = 30;

if(age > 19) {
  var txt = '성인';
}

console.log(txt);	// 성인

var는 if 문안에서 선언되어도 if문 밖에서 접근이 가능하다. let과 const는 이렇게 사용 못 함

function add(num1, num2) {
  var result = num1 + num2;
}

add(2,3)
console.log(result);	// 오류 발생

var 보다는 let과 const 사용을 권장한다.

예측 가능한 결과를 내고 버그를 줄일 수 있기 때문이다.