역시 정리되지 않는 개념은 내게 아니라는 생각이 든다. 알고 있다고 착각한 const, var, let에 대해 정리해본다.
❌ var
우선 JS에서 var는 ES6 이전부터 사용되고 있는 변수 선언 예약어이다.
특징
- 함수 스코프(scope)를 갖는다.
- 재할당 가능하다.
- 전역 실행 컨텍스트에서 선언된
var는 전역 객체의 프로퍼티(property)로 추가된다. - 같은 스코프내에서 중복 선언이 가능하다.
- 호이스팅 현상이 일어나고 해당 변수에 접근이 가능하다.
예
- 전역 객체(window)의 프로퍼티로서 작동
var a = 10;
console.log(a); // 10;
console.log(window.a) // 10;- 같은 스코프내에서 중복 선언 가능
var a = 10;
var a = 20;
var a = 30;
console.log(a); // 30- 선언 전에 호이스팅으로 인해 접근이 가능함.
console.log(a); // undefined
var a = 10;사용
당연하게도 직접 사용은 지양한다. 재할당, 중복선언과 같은 버그를 유발할 수 있는 코드를 작성하게 되고, 호이스팅 현상에 의해서 값을 할당하기 전부터 접근이 가능하여 문제를 일으킬 수 있다.
⚠️ let
ES6+이후에 추가 된 변수 선언 예약어이다.
특징
- 블록 스코프를 가진다.
- 재할당이 가능하다.
- TDZ(Temporal Dead Zone)이 발생한다.
- 호이스팅이 발생하지만 접근은 불가능 하다.
- 중복 선언이 불가능하다.
Temporal Dead Zone(TDZ)
변수를 선언하고 초기화할 때까지 접근 불가능한 구역이 생긴다. 이를 TDZ라고 한다. 조심할 점은 문서의 순서가 아니라, 초기화 시점(시간)까지라는 점이다. Temporal(시간)인 이유가 여기 있다. 다음 예를 보자.
const func = () => console.log(letVariable);
let letVariable = 3;
func();문서의 순서 기준으로 TDZ가 생성됬다면, 첫번째 줄에서ReferenceError가 났을 것이다. 하지만 letVariable가 3으로 초기화 되고 func함수가 실행됬기 때문에 위 코든 에러가 나지 않는다. 즉, let은 변수가 만들어졌을 때가 아니라 평가 되었을 때 해석하게 된다.
사용
변수에 선언 후, 재할당이 필요할 때 사용한다. 변경 가능성을 열어둔다는 점에서 재할당할 변수가 아니라면 const를 지향하는 것이 좋다.
⭕ const
ES6+이후에 나온 변수 선언 예약어이다.
특징
- 블록 스코프를 가진다.
- 선언과 동시에 초기화를 진행해야 한다.
- 재할당이 불가능하다.
- TDZ(Temporal Dead Zone)이 발생한다.
- 호이스팅은 발생하지만 선언 전에 접근하면 에러가 발생한다
- 중복 선언이 불가능하다.
- 객체의 경우 내부 프로퍼티 값의 변경은 가능하다.
예
- 내부 프로퍼티 값이 변경 가능한 예
const obj = {
a: 1,
b: 2,
}
obj = {c: 1, d: 2} // error
obj.a = 5 // done사용
기본적으로 모든 변수는 특별한 경우가 아니라면 const로 선언하기를 장려한다. 이유는 변수의 변경을 막아 변경에 의한 side effect를 줄일 수 있기 때문이다.
결론
var로 선언된 변수만 LexicalEnvironment에 등록되어 호이스팅이 일어나는 줄 알았지만, const, let도 블록스코프가 생성되면 새로운 LexicalEnvrionment를 생성하여 호이스팅이 일어난다는 것을 알았다. 단지 선언 전에 접근할 수 없게 만들어놨다는 것이 var와의 차이였다.
const를 기본적으로 사용하고 let은 재할당이 필요한 경우에만 사용하는게 좋다. var는 마음 속에 묻어두자.
참고
