[JS] const, let, var :: 자바스크립트 변수(variable)와 호이스팅, TDZ

본 포스팅은 유튜브 코딩앙마 님의
"자바스크립트 중급 강좌 : 140분 완성" 을 듣고 정리한 개인 공부글입니다.

 

 
 
자바스크립트의 변수 선언은 크게 세 단계로 분류해볼 수 있다.
1. 선언 단계 → 2. 초기화 단계(undefined 상태) → 3. 할당 단계(실제 값 할당)
 
 
JS에서는 각 변수 선언 과정과 관련해서 세 가지 변수 키워드 `const` `let` `var`를 사용하여 변수를 선언한다. 
 
var : 변수 재선언 가능, 재할당 가능
선언 단계와 초기화 단계가 동시에 동작하는 변수. 선언과 동시에 `undefined`로 값이 초기화된다.

 

초기 JS에서의 변수 선언 방식으로, 실수로 값을 업데이트 해도 문제를 알 수 없다는 단점이 있다.

이후 언어 차원에서 변수 값의 보호를 위해 `const`(수정 불가)와 `let`(수정 허용)이 등장했다.

var은 변수를 선언하기 이전에 사용이 가능하다는 특징이 있는데, 이는 호이스팅이라는 개념 덕분이다.
 
* 호이스팅
변수 선언 코드가 어디에 있던지 스코프 최상위에서 선언된 것처럼 동작하는 것
전체 코드에서 모든 선언문(변수, 함수 등등) 은 실제 코드를 읽어서 실행하기 이전에 먼저 수행되는 과정을 거친다.
따라서 선언문은 코드의 어디에 위치해있든지 간에 가장 먼저 실행된다.

// 일반적으로는 변수 선언 후에 사용
var name = "mankkong";
console.log(name); // mankkong


// var 변수는 선언 이전에 사용 가능 (에러 발생하지 않음)
console.log(name); // undefined
var name = "mankkong"

// 아래처럼 동작
var name; // 변수 선언 호이스팅
console.log(name);

name = "mankkong"; // 값 할당은 나중에

위에서 선언되지 않은 변수는 var로 인식, 변수 선언문이 호이스팅되어 최상위에 작성된 것처럼 동작한다.
이때, 선언은 호이스팅 되지만 할당값은 호이스팅 되지 않기 때문에 변수값은 `undefined`로 초기화된다.
 
 
let : 재선언 불가, 재할당 가능
선언 단계와 초기화 단계가 분리되어 동작하는 변수.
var과 마찬가지로 변수 선언 단계가 호이스팅 되지만, 선언을 했다고 해도 초기화가 안 된 상태이기 때문에 값을 할당하기 이전의 TDZ 영역에서는 사용이 불가하다.
 
* TDZ (temporal dead zone) : 스코프 내부에서 변수를 할당하기 이전의 영역

출처 - 코딩앙마

TDZ 영역에서 할당하지 않은 변수 사용을 막음으로써 코드 예측을 가능하게 하고 버그를 줄일 수 있다.
 
 
const(= 상수) : 재선언 불가, 재할당 불가
선언 + 초기화 + 할당 과정이 동시에 동작하는 변수.
선언 후 나중에 값을 할당하거나 이미 할당한 값을 변경하는 것이 불가하다.
 
let과 마찬가지로 변수 사용에 있어서 TDZ 영역의 영향을 받는다.
 

---

이렇게만 보면 할당이 비교적 자유로운 `var`을 많이 쓸 것 같지만, 프로그램을 짜다보면 오히려 대부분의 경우에 `const`를 사용하게 된다. `var`의 자유성이 예상치 못한 에러의 원흉이 되기 때문...^^
 
 
더해서 위의 세 가지 변수를 스코프(scope, 변수 동작 범위) 개념으로 구분해보면
1) 함수 스코프 → `var`
함수 내에서 선언된 변수만 지역변수로 사용됨, 그 외 블록은 상관 x
 
2) 블록 스코프 → `let`, `const`
모든 변수는 선언된 블록 내에서만 사용 가능(지역변수), 외부에서 접근 불가
ex) 함수, if문, 반복문, try/catch문 등
 
로 비교해볼 수 있따!
 
 
참고자료 ::

Scope | PoiemaWeb