[Javascript/자바스크립트] 변수(Variable) var/let/const 차이점 및 비교 정리 (TDZ, Hoisting)

 

자바스크립트의 변수 종류에는 var, let, const 3개가 있고, 

ES6로 오고나서부터는 var는 잘 쓰이지 않고, let과 const 를 주로 사용한다.

이유는 값이 변경되고, 문제가 발생하는 에러 관리가 편하기 때문이다.

 

변수 선언에는 3가지 단계와 2가지 상태를 알아야 한다.

 

[  단계 ]

 [1] 선언 단계 : 변수를 변수 실행 객체에 등록하는 단계 

 [2] 초기화 단계 : 선언은 했고, 아직 할당은 하지 않은 단계로 선언된 변수에 아직 아무것도 값이 담겨있지 않고,

                           변수를 위한 메모리를 만드  는 단계로, 이 단계에서 메모리에는 undefined로 초기화

 [3] 할당 단계 : 사용자가 undefined로 초기화되어있는 메모리값이 담겨있는 변수 안에 값을 할당하는 단계

 

[ 상태  ]

 [1] Hoistiong : 스코프(범위) 내부 어디서든 변수 선언은 최상위에 선언 된 것처럼 행동. 즉, 선언 전에 호출을 해도 호출은 가능

 [2] Temporal Dead Zone(TDZ) : 스코프 시작 지점부터 초기화 시작 지점까지의 구간

 

[ var / let / const ]

var

: 선언 및 초기화단계를 동시에 진행한다. 즉, 선언하자마자 var의 메모리에 undefined 메모리 값이 부여되는 상태.

hoisting 가능 -> 그러나 할당단계를 거치지 않았다면, 호출은 가능하되, undefined으로 정의되어 있다.

var name;

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

 

let

* 특징 : 재할당 가능, 호이스팅 가능, TDZ(블록 스코프: 함수 if문, for문, while, try/catch문 등)

: 선언 단계, 초기화 단계, 할당 단계 3가지를 차례대로 거친다.

let name;

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

 

const

* 특징: 재할당 불가능, 호이스팅 가능, TDZ(함수 스코프)

:한번에 선언단계 + 초기화 단계 + 할당 단계 를 진행한다.

 

 

** 정리 **

 

1. var 사용은 자제하고, const와 let 변수선언을 사용하자. 에러대응에 유용하다.

2. 재할당이 필요없는 상수와 객체는 const로 선언하는 것이 클린코드의 정석이다. 

    의도치 않은 재할당을 방지해주고, 에러대응에 안전하다.

3. 재할당이 필요한 경우, let 변수를 사용하되, 변수의 스코프는 최대한 좁게 만드는 것이 안전한 코드작성이다.