Javascript - 변수(hoisting, tdz, scope)

변수 - hoisting, tdz, scope

let, const, var

var는 한번 선언된 변수를 재선언 할 수 있다.

var name = 'Tom';
console.log(name); // Tom
var name = 'Holland';
console.log(name); // Holland

let은 재선언이 불가능하다.

var name = 'Tom';
console.log(name); // Tom
var name = 'Holland';
console.log(name); // error !

var는 선언하기 전에 사용할 수 있다.

console.log(name); // undefined
var name = 'Tom';

How?

var로 선언한 변수는 실제로는 이동하지 않지만 최상위로 끌어올려진 것처럼 동작(호이스팅 Hoisting)하기 때문이다.

호이스팅(Hoisting)
스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동.
선언은 호이스팅 되지만 할당은 그렇지 않아 undefined로 찍힌다.

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

let의 경우엔 error가 발생한다.

console.log(name); // ReferenceError !
let name = 'Holland';

그렇다고 let이 호이스팅 되지 않는 것은 아니다.
let, const는 Temporal Dead Zone(TDZ)의 영향을 받기 때문이다.

console.log(name); // -> TDZ (ReferenceError)
const name = 'Spider-Man'; // 선언 및 할당
console.log(name); // 사용 가능

TDZ (Temporal Dead Zone)
선언 단계부터 초기화 시작 전까지의 구간, 일시적인 사각지대라는 의미

출처 - Don't Use JavaScript Variables Without Knowing Temporal Dead Zone

변수의 생성 과정을 살펴보자.

선언 단계 - 초기화 단계 - 할당 단계

초기화 : undefined를 할당 해주는 단계

var는 선언과 초기화 단계가 동시에 진행된다.
1.선언 및 초기화 단계
2.할당 단계

let은 선언과 초기화 단계가 분리되어 진행된다.
1.선언 단계 - 호이스팅되며 선언 단계가 진행
2.초기화 단계 - 실제 코드에 도달했을때 진행
3.할당 단계

const는 선언과 할당이 동시에 되어야한다.
1.선언 + 초기화 + 할당

var name;
name = 'Tom';

let name2;
name2 = 'Holland';

const name3;
name3 = 'Spider-Man'; // error !

즉 TDZ 시맨틱은 선언 전에 변수에 접근하는 것을 금지한다.
그로인해 let과 const도 호이스팅되지만 TDZ에 의해 접근할 수 없어서 ReferenceError가 발생하는 것이다.

scope

var : 함수 스코프(function-scoped)
let, const : 블록 스코프(block-scoped) - 모든 코드블록에서 선언된 변수는 코드블록 내에서만 유효하며 외부에선 접근할 수 없다. 즉 코드블록 내부에서 선언된 변수는 지역 변수다.

var는 if문 밖에서 사용이 가능하지만 let, const는 불가능하다.
var가 유일하게 벗어날 수 없는 스코프는 함수라고 생각하자

const age = 31;

if(age > 29) {
    var im = 'old';
}
console.log(im); // old

function fullName(name, name2){
    var myName = name + name2;
    console.log(myName);
}
fullName('Tom ', 'Holland'); // Tom Holland
console.log(myName); // ReferenceError !