[JS 자습] 1 - 변수 (var/let/const 차이)

1.변수 (var/let/const 차이)

 

• var는 한번 선언된 변수를 다시 선언할 수 있다.
• var는 선언하기 전에 사용할 수 있다. (호이스팅)
• Let과 Const는 TDZ(Temporal Dead Zone) 영향을 받기 때문에 할당하기 전에는 사용할 수 없다.
• 호이스팅은 스코프 내에서 일어난다.

 

*호이스팅 : 스코프 내부 어디서든 변수 최상위에 선언된 것처럼 행동(var, let, const, function, class 등의 모든 식별자들은 호이스팅 된다.)

 

변수의 생성과정

 

Var

1. 선언 및 초기화 단계 2. 할당단계

 

Let

1. 선언단계 2.초기화 단계 3.할당 단계

 

Const

1.선언 + 초기화 + 할당

 

 

*TDZ(Temporal Dead Zone)이란?

일시적인 사각지대라는 의미로 스코프 시작 ~ 초기화 시작 사이의 구간을 의미한다.

출처 : https://funveloper.tistory.com/25

 

TDZ 구간에서는 선언되지 않거나 초기화 전인 변수를 참조하면 Error가 발생한다.

아래 예시를 보자.

 

var는 변수에 값을 할당하지 않아도 참조가 가능하다 (undefined 값 반환) 이미 변수 선언 / 변수 초기화 단계가 끝났기 때문이다.

 

반대로 let은 Reference Error가 발생하는데 이는 호이스팅이 일어나지 않아서가 아니라, TDZ 영역에 들어가 있기 때문이다. let은 호이스팅 되면서 선언단계가 이루어지지만 초기화 단계는 실제 코드에 다다랐을 때 이루어지기 때문에 Reference Error가 일어나는 것이다.

 그래서 위와 같이 선언단계 / 초기화 단계가 다 끝나고 let test2를 참조하면 undefined가 반환된다.

 

const도 이와 비슷한데, 호이스팅 결과를 보면 아래와 같다.

 똑같이 error 메세지가 뜨지만 let의 Reference Error 메세지와는 다르다. "Missing initializer in const delaration"이라고 뜨는데, 초기화가 필요하다는 뜻이다.

 

const 변수에 값을 할당해주어도 호이스팅 결과는 Reference Error이다.  const는 선언/초기화/할당이 동시에 이루어져야 하기 때문에 호이스팅 되었을 때는 아직 변수 선언도 안된 상태이기 때문에 TDZ의 영향을 받는다.

 

 

 

*스코프

1. 블록 스코프(함수, if문, for문, while문, try/catch문 등) : 코드 블록 내에서 선언된 변수는 그 코드 블록 내에서만 유효하다.(지역변수)
2. 함수 스코프 : 함수 내에서 선언된 변수만 그 함수내에서 유효하다.

 

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

*var는 함수 외에 if문, for문, while문 안에서 쓰이면, 상위 스코프에서도 읽을 수 있다.

 

let, const : 블록 스코프(block-scoped)