[JavaScript] 변수, 호이스팅, TDZ

반응형

변수

https://dailyjiwoong.tistory.com/entry/JavaScript-%EB%B3%80%EC%88%98

[JavaScript] 변수

 let과 const는 ES6 버전에 추가되었으며, 이전 버전까지는 var을 사용하여 선언했다.

 

var

 var는 let이나 const와 다르게 한번 선언된 변수를 다시 선언할 수 있다.

var name = 'jiwoong'
console.log(name);
var name = 'messi'
console.log(name);

 

변수의 생성과정

 변수는 3단계의 생성과정을 거친다.

 1. 선언 단계

 2. 초기화 단계 (undefined 할당)

 3. 할당 단계

 

 ● var는 선언과 초기화를 동시에 진행하고 마지막에 할당한다.

 ● let은 선언과 초기화가 분리되어 있다.

 ● const는 선언, 초기화, 할당이 동시에 이루어진다.

 

호이스팅

 호이스팅이란 스코프(유효범위) 내부 어디서든 변수 선언은 가장 위에서 선언된 것처럼 동작하는 것을 말한다.

https://dailyjiwoong.tistory.com/entry/%EC%8A%A4%EC%BD%94%ED%94%84

스코프

console.log(name);
var name = 'jiwoong';

 

 위 코드의 호이스팅을 시각화 하면 이렇다.

var name;
console.log(name);
name = 'jiwoong';

 

 var는 선언과 초기화를 동시에 진행되기 때문에 할당된 값이 아닌  undefined가 출력 된다. name이라는 선언은 호이스팅되지만 'jiwoong'이라는 할당은 그렇지 않기 때문이다.

 

 let과 const도 호이스팅되지만, 같은 코드를 let이나 const로 작성하면 오류가 발생한다.

 이는 Temporal Dead Zone (TDZ) 때문이다.

https://dailyjiwoong.tistory.com/entry/TDZ

TDZ

 

 let과 const는 TDZ의 영향을 받는다. 이유는 다음과 같다.

 

 - let은 선언과 초기화가 분리되어 있기 때문에 선언은 호이스팅 되지만 실제 코드에 도달했을 때 초기화 된다.

 따라서 아래 코드는 오류가 발생한다.

console.log(name);
let name = 'jiwoong';

 

 - const는 선언, 초기화, 할당이 동시에 이루어진다.

 아래 코드는 선언은 했지만 할당하지 않았기 때문에 오류가 발생한다.

const name;
name = 'jiwoong';